jQuery CSS 操作 - scrollLeft() 方法 概述
jQuery 2022-06-01 17:15:5711小码哥的IT人生shichen
jQuery CSS 操作 - scrollLeft() 方法
实例
设置 <div> 元素中滚动条的水平偏移：
$(".btn1").click(function(){ $("div").scrollLeft(100); });
完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").scrollLeft(100); }); }); </script> </head> <body> <div style="border:1px solid black;width:100px;height:130px;overflow:auto"> The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. </div> <button class="btn1">把滚动条的水平位置设置为 100px</button> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。
返回水平滚动条位置
返回第一个匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft()完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ alert($("div").scrollLeft()+" px"); }); }); </script> </head> <body> <div style="border:1px solid black;width:100px;height:130px;overflow:auto"> The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. </div> <button class="btn1">获得滚动条的水平位置</button> <p>试着移动滚动条，然后再次点击按钮。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
设置水平滚动条位置
设置所有匹配元素的水平滚动条位置。
语法
$(selector).scrollLeft(position)| 参数 | 描述 |
|---|---|
| position | 可选。规定以像素计的新位置。 |
完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").scrollLeft(100); }); }); </script> </head> <body> <div style="border:1px solid black;width:100px;height:130px;overflow:auto"> The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. </div> <button class="btn1">把滚动条的水平位置设置为 100px</button> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
