css scroll属性_CSS中的scroll-behavior属性

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

输出量

CSS | scroll-behavior property | Example 1

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

输出量

CSS | scroll-behavior property | Example 2

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.

忠告词：建议您在处理链接时应用此属性，因为此属性将有助于平稳运行，并使您的网站也具有良好的响应能力。