- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Smooth Scrolling with Pure CSS
The CSS scroll-behavior property allows us to change the behavior of scroll. The following are the values are set within the scrolling box −
auto − A scroll effect is set between the elements within the scrolling box.
Smooth − A smooth animated scroll effect is set between the elements The following examples illustrate CSS scroll-behavior property.
Scroll Behavior Smooth
The scroll behavior is set to smooth for the div container −
#parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll }
The following is the div container for which the scroll is set −
<div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="pink"></div> <div class="blue"></div> <div class="pink" id="last"><a href=#first>First</a></div> </div>
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> html { line-height: 200px; margin: 30px; text-align: center; vertical-align: middle; } #parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll } .pink { height: 200px; box-shadow: inset 0 0 50px deeppink; } .blue { height: 200px; box-shadow: inset 0 0 50px darkblue; } </style> </head> <body> <div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="pink"></div> <div class="blue"></div> <div class="pink" id="last"><a href=#first>First</a></div> </div> </body> </html>
Scroll Behavior Auto
The scroll behavior is set to smooth for the div container −
#parent { scroll-behavior: auto; width: 150px; height: 150px; overflow: hidden; border: 22px groove tomato; border-radius: 50%; }
The following is the parent div −
<div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="green"></div> <div class="blue"></div> <div class="green" id="last"><a href=#first>First</a></div> </div>
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> html { line-height: 150px; margin: 30px; text-align: center; vertical-align: middle; } #parent { scroll-behavior: auto; width: 150px; height: 150px; overflow: hidden; border: 22px groove tomato; border-radius: 50%; } .green { height: 150px; box-shadow: inset 0 0 50px darkgreen; } .blue { height: 150px; box-shadow: inset 0 0 50px darkblue; } </style> </head> <body> <div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="green"></div> <div class="blue"></div> <div class="green" id="last"><a href=#first>First</a></div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google