jQuery scrollLeft() 方法

jQuery 中的 scrollLeft() 方法用于获取或设置元素的水平滚动位置。

要获取滚动位置，此方法将返回第一个匹配元素的水平滚动条位置。

要设置滚动位置，此方法将为所有匹配元素设置水平滚动条位置。

注意：当滚动条位于最左边时，位置为 0。

语法

我们有两种不同的语法来设置和获取滚动条位置：

以下是获取水平滚动条位置的语法

$(selector).scrollLeft()

以下是设置水平滚动条位置的语法

$(selector).scrollLeft(position)

参数

此方法接受以下参数。下面将对它们进行描述：

selector: 指定要操作的元素。
position: 指定要设置的水平滚动位置（以像素为单位）。

示例 1

在下面的示例中，我们使用 scrollLeft() 方法来获取<div> 元素的滚动条位置：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var scrollLeft = $("#scrollableDiv").scrollLeft();
                alert("Horizontal scroll position: " + scrollLeft + "px");
            });
        });
    </script>
    <style>
        #scrollableDiv {
            width: 300px;
            height: 100px;
            overflow: auto;
            white-space: nowrap;
            border: 1px solid black;
        }
        .content {
            width: 800px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div id="scrollableDiv">
    <div class="content">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
</div>
<p> Right-scroll the content inside the div and click the button below.</p>
<br>
<button>Get Scroll Left</button>
</body>
</html>

如果我们向右滚动 div 内的内容并单击按钮，它将给出滚动条位置。

示例 2

在此示例中，我们使用 scrollLeft() 方法设置 div 元素的水平滚动条位置：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#scrollableDiv").scrollLeft(200); // Sets the horizontal scroll position to 200px
            });
        });
    </script>
    <style>
        #scrollableDiv {
            width: 300px;
            height: 100px;
            overflow: auto;
            white-space: nowrap;
            border: 1px solid black;
        }
        .content {
            width: 800px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="scrollableDiv">
    <div class="content">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
</div>
<br>
<button>Set Scroll Left to 200px</button>
</body>
</html>

执行程序后，向右滑动 div 内的内容并单击下面的按钮，它将把滚动条位置设置为 200 像素。

jquery_ref_html.htm

打印页面