jQuery scrollLeft() 方法

定义和用法

scrollLeft() 方法设置或返回被选元素的水平滚动条位置。

提示：当滚动条位于最左侧时，位置是 0。

当用于返回位置时：该方法返回第一个匹配元素的滚动条的水平位置。

当用于设置位置时：该方法设置所有匹配元素的滚动条的水平位置。

语法

返回水平滚动条位置：

$(selector).scrollLeft()

设置水平滚动条位置：

$(selector).scrollLeft(position)

参数描述

参数	描述
position	规定以像素为单位的水平滚动条位置。

实例

下例演示了返回 <div> 元素的水平滚动条位置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
       $("button").click(function(){
           alert($("div").scrollLeft()+" px");
       });
    });
</script>
</head>
<body>
    <div style="border:1px solid black;width:150px;height:200px;overflow:auto">
      欢迎来到菜鸟教程欢迎来到菜鸟教程欢迎来到菜鸟教程欢迎来到菜鸟教程这是一个段这是一个
      段这是一个段落这欢迎来到菜鸟教程欢迎来到菜鸟教程欢迎来到菜鸟教程欢迎来到菜鸟教程是一个段落。
    </div>
    <button>返回水平滚动条的位置</button>
    <p>向右移动滚动条,再次单击该按钮。</p>
</body>
</html>

尝试一下

jQuery scrollLeft() 方法

定义和用法

语法

参数描述

实例

相关页面