jQuery scrollLeft( ) 方法
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery scrollLeft( ) 方法相关的知识，希望对你有一定的参考价值。
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的水平滚动条位置。
（1）返回水平滚动条位置
语法格式：
$(selector).scrollLeft() （2）设置水平滚动条的位置
语法格式：
$(selector).scrollLeft(position) 注意：当返回位置时，只会返回匹配到的第一个元素的水平滚动条位置。当设置位置时，会设置匹配到的所有元素的水平滚动条位置。
示例：
（1）返回水平滚动条的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$(".para").scroll(function () {
var position = $(this).scrollLeft();
console.log(position);
})
})
</script>
<style>
.para {
width: 150px;
height: 150px;
background-color: rgba(38, 172, 26, 0.644);
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<p class="para">never say never!never say never!never say never!never say never!never say never!never say never!never say never!never say never!never say never!never say never!never say never!never say never!</p>
</body>
</html>
当拖动滚动条时，控制台会输出水平滚动条当前的位置：
（2）设置水平滚动条的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function(){
$(".para").animate(
{
scrollLeft:50
}
)
})
})
</script>
<style>
.para {
width: 150px;
height: 150px;
background-color: rgba(38, 172, 26, 0.644);
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<button>按钮</button>
<p class="para">never say never!never say never!never say never!never say never!never say never!never say never!</p>
</body>
</html>
点击按钮，水平滚动条将带有动画地滚动至指定位置，如图：
以上是关于jQuery scrollLeft( ) 方法的主要内容，如果未能解决你的问题，请参考以下文章
使用动画链（jQuery）在 Ipad 上的 ScrollLeft 和 ScrollTop
在 FF 和 Chrome（但不是 Safari）中单击几次后，jQuery animate scrollLeft 停止工作
jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解
16/8/23-jQuery完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片
jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position