📅 最后修改于: 2023-12-03 14:43:15.692000 🧑 作者: Mango
scrollLeft()是jQuery中的一个方法，用于获取或设置元素的水平滚动条位置。通常使用该方法来实现页面上的滚动效果。
获取元素的水平滚动条位置：
$(selector).scrollLeft();
设置元素的水平滚动条位置：
$(selector).scrollLeft(value);
selector：表示要获取或设置滚动条的元素；value：表示要设置的滚动条位置，单位为像素。以下是一个简单的示例，演示如何使用scrollLeft()方法实现网页的水平滚动效果。
<!DOCTYPE html>
<html>
<head>
<title>jQuery | scrollLeft() 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.wrapper {
overflow-x: scroll;
width: 300px;
margin: 0 auto;
}
.inner {
width: 600px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
<script>
$(document).ready(function() {
$(".wrapper").scrollLeft(100); // 将滚动条移动到位置100
});
</script>
</body>
</html>
在这个示例中，我们通过CSS的overflow-x: scroll属性将.wrapper元素设置为一个有水平滚动条的容器，然后在该元素内部创建一个.inner元素，用于填充内容。
接着，在jQuery的ready()方法中，使用scrollLeft()方法将.wrapper元素的滚动条位置移动到位置100。
打开该示例，即可看到.wrapper元素的滚动条被移动到了最左侧，水平滚动条的位置为100像素。
scrollLeft()方法是jQuery中非常常用的一个方法，在实现网页的水平滚动效果时非常方便。通过本文的介绍，相信你已经掌握了该方法的使用技巧。