Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sara-pixie/blur-top-bottom-scroll

How to make the top and bottom blur inside a scroll container with buttons to scroll to top and scroll to bottom
https://github.com/sara-pixie/blur-top-bottom-scroll

angular how-to scroll scroll-bottom scroll-to scroll-to-bottom scroll-to-top scroll-top scrolling

Last synced: 2 months ago
JSON representation

How to make the top and bottom blur inside a scroll container with buttons to scroll to top and scroll to bottom

Host: GitHub
URL: https://github.com/sara-pixie/blur-top-bottom-scroll
Owner: Sara-pixie
Created: 2023-01-17T09:38:51.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-01-19T12:49:06.000Z (about 2 years ago)
Last Synced: 2023-08-21T08:15:49.028Z (over 1 year ago)
Topics: angular, how-to, scroll, scroll-bottom, scroll-to, scroll-to-bottom, scroll-to-top, scroll-top, scrolling
Language: TypeScript
Homepage:
Size: 223 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Blur Top Bottom Scroll

How to listen to when the content inside an element is scrolled all the way to the top or bottom and display a blur and scroll button accordingly. See the images bellow for possible result (you can edit the code to your liking of course):

![image](https://user-images.githubusercontent.com/78561671/213428232-e1c36fdc-9cbe-491a-af1f-169f25e85b14.png)

![image](https://user-images.githubusercontent.com/78561671/213428290-29e5bce1-1ddb-42ef-a235-f928209e2617.png)

![image](https://user-images.githubusercontent.com/78561671/213428324-0b81de8d-8aa7-4276-9870-55a6fa57ab51.png)

See code [here](https://github.com/Sara-pixie/blur-top-bottom-scroll/tree/main/src/app): 


-> [HTML](https://github.com/Sara-pixie/blur-top-bottom-scroll/blob/main/src/app/app.component.html) 


-> [SCSS](https://github.com/Sara-pixie/blur-top-bottom-scroll/blob/main/src/app/app.component.scss) 


-> [TS](https://github.com/Sara-pixie/blur-top-bottom-scroll/blob/main/src/app/app.component.ts)