Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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> 
Updated on: 2023-12-27T16:31:01+05:30
482 Views
Advertisements