Geek Answers Handbook

What is the scroll-behavior css property?

I recently noticed a scroll-behavior property that I can specify in my css. It can accept only 2 properties: inherit and initial . I had never heard / seen him before, so I tried to look at him. The problem is that all the links are going to explain different things about the overflow property.

Then I tried to check it out .

 <div id="scroll"> <div id="inside"> </div> #scroll{ width: 100px; height: 500px; scroll-behavior: inherit; overflow: auto; border: 2px solid black; } #inside{ height : 1000px; }

The problem is that I do not see the difference. So what is he doing?

+8
html css
source share
1 answer

I noticed that he appeared in my Chrome Inspector, which led me to this message ...

What is scroll behavior?

Specifically, this CSSOM-View property 'Scroll-Behavior', the css property was created to integrate the greater CSS flexibility for scrolling DOM elements. Most of the scroll options that are created for websites are usually built on a JS library or plugin. As mentioned above, here is the release - http://dev.w3.org/csswg/cssom-view/#scrolling

The current accepted DOM scroll behavior is set using anchor labels (example: Click Me). When this CSS property is fully implemented in all browsers and correctly implemented (check out this discussion: https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig ). You can switch the "instant" tag of the anchor tag to a smoother scrolling.

The real question is when will this property be available in border browsers? It is currently recognized by Firefox and Chrome, but the property is not "active" because the study has passed.

 #scroll{ width: 350px; height: 500px; scroll-behavior: smooth; overflow: scroll; border: 2px solid black; } #inside1{ height : 1000px; background-color:blue; } #inside2{ height : 1000px; background-color:orange; } #inside3{ height : 1000px; background-color:red; } <nav> <a href="#inside1">#1</a> <a href="#inside2">#2</a> <a href="#inside3">#3</a> </nav> <div id="scroll"> <div id="inside1"></div> <div id="inside2"></div> <div id="inside3"></div> </div>

Check out JSFiddle to see how instant scrolling through anchor tags through the DOM is done - http://jsfiddle.net/timcasonjr/5t0so7n7/3/

+7
source share

More articles:


All Articles