css scroll屬性
CSS | 滾動行為屬性 (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.
誰不希望他們的鏈接順暢而吸引人？ 這種功能非常容易實現。 您所需要的只是對該物業有所了解，這將有助于實現它。 該屬性的名稱是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屬性有利于滾動位置的平滑動畫，而不是直接跳轉到元素。
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.
當我們需要在頁面上添加鏈接并希望用戶單擊鏈接時，它將平穩地執行其操作。 因此，此屬性有助于在有限的可滾動框中從一個鏈接平滑過渡到另一個鏈接。
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!
此屬性包含兩個非常基本的屬性。 讓我們繼續前進，一一看一下！
滾動行為屬性值 (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 ，名稱本身帶有此屬性的定義。 當我們單擊滾動框中的鏈接時，此屬性用于在不同元素之間添加平滑的動畫滾動效果。
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.
繼續并隨意運行上述代碼，以查看平滑的滾動效果。
2) auto
2)自動
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是滾動行為的另一個非常有用的屬性，當用戶單擊滾動框中的另一個鏈接時，此屬性用于指定直接跳轉滾動效果。 也是默認值。
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?
為什么不繼續運行上面的代碼來查看自動滾動效果？
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.
忠告詞：建議您在處理鏈接時應用此屬性，因為此屬性將有助于平穩運行，并使您的網站也具有良好的響應能力。
翻譯自: https://www.includehelp.com/code-snippets/the-scroll-behavior-property-in-css.aspx
css scroll屬性
