HTML - DOM Style 对象 scrollBehavior 属性

HTML DOM Style 对象的**scrollBehavior**属性指定平滑滚动效果，而不是在用户点击可滚动框内的链接时立即滚动。

语法

设置 scrollBehavior 属性

object.style.scrollBehavior= "auto | smooth | initial | inherit";

获取 scrollBehavior 属性

object.style.scrollBehavior;

属性值

值	描述
auto	这是默认值，滚动框在元素之间立即滚动。
smooth	它指定元素之间平滑滚动效果。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回所选元素的 scrollBehavior 属性的当前值。

HTML DOM Style 对象“scrollBehavior”属性示例

以下示例使用列表和 div 元素解释 scrollBehavior 属性以滚动浏览不同的部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object right Property
    </title>
    <style>
        div {
            height: 700px;
            border: 2px solid #04af2f;
            }
        #section1 {
            background-color: rgb(202, 249, 249);
        }
        #section2 {
            background-color: rgb(241, 189, 238);
        }
        #section3 {
            background-color: rgb(248, 222, 161);
        }
    </style>
</head>
<body>
    <h3>
        Click on the links in list or links inside 
        three section before and after clicking on 
        'Change scoll Behavior' button to see change 
        in scroll effects using smooth scroll behavior
        property.
    </h3>
    <button onclick="fun()">Change scoll Behavior</button>    
    <br><br>
    <ul>
        <li>
            <a href="#section3">Jump to section 3</a>
        </li>
        <li>
            <a href="#section2">Jump to section 2</a>
        </li>
        <li>
            <a href="#section1">Jump to section 1</a>
        </li>
    </ul>
    <div id="section1">
        This is Section 1 
        <br>
        <a href="#section2">Jump to section 2</a>
        <br>
        <a href="#section3">Jump to section 3</a>
    </div>
    <div id="section2">
        This is Section 2
        <br>
        <a href="#section3">Jump to section 3</a>
        <br>
        <a href="#section1">Jump to section 1</a>
    </div>
    <div id="section3">
        This is Section 3
        <br>
        <a href="#section1">Jump to section 1</a>
        <br>
        <a href="#section2">Jump to section 2</a>
    </div>
    <script>
        function fun() {
            document.documentElement.style
                .scrollBehavior = "smooth";
        }   
    </script>
</body>
</html>

支持的浏览器

属性
scrollBehavior	是 61	是 79	是 36	是 15.4	是 48

html_dom_style_object_reference.htm

打印页面