css scroll属性_CSS中的scroll-behavior属性
css scroll屬性
CSS | 滾動(dòng)行為屬性 (CSS | scroll-behavior property)
Who does not want their links to function smoothly and attractively? This type of functionality is very easy to implement. All you need is a bit of awareness about the property that would help in achieving it. The name of that property is the scroll-behavior property.
誰不希望他們的鏈接順暢而吸引人？ 這種功能非常容易實(shí)現(xiàn)。 您所需要的只是對該物業(yè)有所了解，這將有助于實(shí)現(xiàn)它。 該屬性的名稱是scroll-behavior屬性 。
The scroll-behavior property in CSS is beneficial for smooth animation of the scroll position instead of jumping directly to the element.
CSS中的scroll-behavior屬性有利于滾動(dòng)位置的平滑動(dòng)畫，而不是直接跳轉(zhuǎn)到元素。
When we need to add links on our page and want the user to click on the links it smoothly performs its operation. Thus, this property helps in a smooth transition from one link to another within a confined scrollable box.
當(dāng)我們需要在頁面上添加鏈接并希望用戶單擊鏈接時(shí)，它將平穩(wěn)地執(zhí)行其操作。 因此，此屬性有助于在有限的可滾動(dòng)框中從一個(gè)鏈接平滑過渡到另一個(gè)鏈接。
Syntax:
句法：
Element {scroll-behavior: auto|smooth; }This property comprises of two very fundamental attributes. Let us move forward and have a look at them one by one!
此屬性包含兩個(gè)非常基本的屬性。 讓我們繼續(xù)前進(jìn)，一一看一下！
滾動(dòng)行為屬性值 (scroll-behavior Property values)
1) smooth
1)順暢
Smooth, the name itself bears the definition of this property. This property is used to add a smooth animated scroll effect between different elements when we click on a link in a scrolling box.
Smooth ，名稱本身帶有此屬性的定義。 當(dāng)我們單擊滾動(dòng)框中的鏈接時(shí)，此屬性用于在不同元素之間添加平滑的動(dòng)畫滾動(dòng)效果。
Syntax:
句法：
Element {scroll-behavior: smooth; }Example:
例：
<!DOCTYPE html> <html><head><style>html {scroll-behavior: smooth;}#div1 {height: 400px;background-color: #f1f1f1;}#div2 {height: 500px;background-color: #FFFF33;}</style> </head><body><div class="main" id="div1"><h2>Division 1</h2><p>Click on the link below</p><a href="#div2">Click Me for Smooth Scroll to Section 2 Below</a></div><div class="main" id="div2"><h2>Division 2</h2><a href="#div1">Click Me for Smooth Scroll to Section 1 Above</a></div> </body></html>Output
輸出量
Go ahead and feel free to run the above code to see the smooth scroll effect.
繼續(xù)并隨意運(yùn)行上述代碼，以查看平滑的滾動(dòng)效果。
2) auto
2)自動(dòng)
auto is yet another very useful property for scroll-behaviour, this property is used to specify the direct jump scroll effect when the user clicks on a link to another link within a scrolling box. It is also the default value.
auto是滾動(dòng)行為的另一個(gè)非常有用的屬性，當(dāng)用戶單擊滾動(dòng)框中的另一個(gè)鏈接時(shí)，此屬性用于指定直接跳轉(zhuǎn)滾動(dòng)效果。 也是默認(rèn)值。
Syntax:
句法：
Element {scroll-behavior: auto; }Example:
例：
<!DOCTYPE html><html><head><style>html {scroll-behavior: auto;}#div1 {height: 500px;background-color: #f1f1f1;}#div2 {height: 300px;background-color: #FFFF33;}</style> </head><body><div class="main" id="div1"><h2>Division 1</h2><p>Click on the link below</p><a href="#div2">Click Me to Auto Scroll to Section 2 Below</a></div><div class="main" id="div2"><h2>Division 2</h2><a href="#div1">Click Me to Auto Scroll to Section 1 Above</a></div> </body></html>Output
輸出量
Why don't you go ahead and run the above code to see the auto-scroll effect?
為什么不繼續(xù)運(yùn)行上面的代碼來查看自動(dòng)滾動(dòng)效果？
Word of advice: It is recommendable to apply this property when you are dealing with links as this property would help in smooth functioning and makes your website quite responsive as well.
忠告詞：建議您在處理鏈接時(shí)應(yīng)用此屬性，因?yàn)榇藢傩詫⒂兄谄椒€(wěn)運(yùn)行，并使您的網(wǎng)站也具有良好的響應(yīng)能力。
翻譯自: https://www.includehelp.com/code-snippets/the-scroll-behavior-property-in-css.aspx
css scroll屬性
總結(jié)
以上是生活随笔為你收集整理的css scroll属性_CSS中的scroll-behavior属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP array_filter（）函数
- 下一篇： julia 编程语言_Julia编程语言