CSS - scroll-behavior Property
CSS scroll-behavior property controls how smoothly the browser scrolls when a user clicks on a link or uses the scrollbar.
Possible Values
-
auto − Default value. This value allows the browser to use its default scrolling behavior.
-
smooth − This value create a smooth scrolling effect when you click on links.
Applies to
Scrolling boxes.
DOM Syntax
object.style.scrollBehavior: "auto|smooth";
CSS Scrollbar Behavior - Auto Value
The following example demostartes how to use the scroll-behavior: auto property −
<html> <head> <style> nav { background-color: rgb(67, 238, 45); padding: 5px; text-align: center; width: 300px; } nav a { margin:5px; text-decoration: none; } .scroll-behavior-auto { background-color: #F1EFB0; height: 150px; overflow: auto; scroll-behavior: auto; text-align: center; width: 300px; padding: 5px; } .scrolling-section { display: flex; align-items: center; justify-content: center; height: 100%; } </style> </head> <body> <nav> <a href="#section1">Topic 1</a> <a href="#section2">Topic 2</a> <a href="#section3">Topic 3</a> </nav> <div class="scroll-behavior-auto"> <div class="scrolling-section" id="section1">Topic 1</div> <div class="scrolling-section" id="section2">Topic 2</div> <div class="scrolling-section" id="section3">Topic 3</div> </div> </body> </html>
CSS Scrollbar Behavior - Smooth Value
The following example demostartes how to use the scroll-behavior: smooth property −
<html> <head> <style> nav { background-color: rgb(67, 238, 45); padding: 5px; text-align: center; width: 300px; } nav a { margin:5px; text-decoration: none; } .scroll-behavior-auto { background-color: #F1EFB0; height: 150px; overflow: auto; scroll-behavior: smooth; text-align: center; width: 300px; padding: 5px; } .scrolling-section { display: flex; align-items: center; justify-content: center; height: 100%; } </style> </head> <body> <nav> <a href="#section1">Topic 1</a> <a href="#section2">Topic 2</a> <a href="#section3">Topic 3</a> </nav> <div class="scroll-behavior-auto"> <div class="scrolling-section" id="section1">Topic 1</div> <div class="scrolling-section" id="section2">Topic 2</div> <div class="scrolling-section" id="section3">Topic 3</div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google