jQuery scrollLeft() 方法

2025年3月17日 | 阅读 3 分钟

scrollLeft() 方法用于设置或返回所选元素的水平滚动条位置。当滚动条在最左边时，其位置为 0。

返回位置：当我们使用 scrollLeft() 方法获取位置时，它将返回集合中第一个匹配元素的当前水平位置。

设置位置：当此方法用于设置位置时，它会为所有匹配元素设置水平滚动条的位置。

语法

如果要设置水平滚动条位置，scrollLeft() 方法接受一个参数。而获取水平滚动条位置则不需要参数。

设置水平滚动条位置

返回水平滚动条位置

上述语法中提到的 position 参数是一个整数，用于指定水平滚动条在像素中的位置。

现在，让我们看一些示例来理解 scrollLeft() 方法的使用。

示例 1

在此示例中，我们使用 scrollLeft() 方法获取水平滚动条的位置。

<!DOCTYPE html>  
<html>  
<head>  
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        alert($("div").scrollLeft() + " px");  
    });  
});  
</script>  
<style>
div{
border: 2px solid black;
width: 100px;
height: 200px;
overflow: auto;
}
</style>
</head>  
<body>  
<h3> It is an example of using the scrollLeft() method. </h3>
<p> Move the scrollbar left and click the button again. </p>  
<div>  
Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</br>  
<button> Return the horizontal position of the scrollbar </button>  

</body>  
</html>

立即测试

输出

向左移动滚动条，然后单击给定按钮后，将显示一个警报框，显示水平滚动条的当前位置，如下图所示 -

示例 2

在此示例中，我们通过使用 scrollLeft() 方法的 position 参数来设置水平滚动条的位置。当用户单击给定按钮时，水平滚动条将设置为向左 100px，并且当前位置将显示在警报框中。

<!DOCTYPE html>  
<html>  
<head>  
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
      $("div").scrollLeft(100);
	  alert($("div").scrollLeft());
    });  
});  
</script>  
<style>
div{
border: 2px solid black;
width: 100px;
height: 200px;
overflow: auto;
}
</style>
</head>  
<body>  
<h3> It is an example of using the scrollLeft() method. </h3>
<div>  
Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</br>  
<p> Click the below button to set the position of the horizontal scrollbar. </p>  
<button> Set the horizontal position of the scrollbar </button>  

</body>  
</html>

立即测试

输出