返回值:IntegerscrollLeft()

得到第一个匹配元素的水平滚动条的位置。

水平滚动条的位置与元素上可滚动区域隐藏的像素数是相同的。(原文如下:The horizontal scroll position is the same as the number of pixels that are hidden from view to the left of the scrollable area.)如果滚动条处于最左边,或者元素是不可滚动的,那么该值是 0

注意: .scrollLeft() 无法直接使用在隐藏元素上。如果某些元素虽然不是隐藏的,但是使用了 .animate() 方法对动画属性应用动画后,导致该元素隐藏的,那么也元素在这样的元素上使用该方法。

示例:

取得段落的 scrollLeft 值。

<!DOCTYPE html>
<html>
<head>
<style>
    p { margin:10px;padding:5px;border:2px solid #666; }
    </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p><p></p>

<script>

var p = $("p:first");
			$("p:last").text( "scrollLeft:" + p.scrollLeft() );

			

</script>
</body>
</html>

演示:

返回值:jQueryscrollLeft(value)

为每个匹配的元素设置水平滚动条的位置。

水平滚动条的位置与元素上可滚动区域隐藏的像素数是相同的。(原文如下:The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area.)该方法会为每个匹配的元素设置 scrollLeft

示例:

为 div 设置 scrollLeft 。

<!DOCTYPE html>
<html>
<head>
<style>
  div.demo {
  background:#CCCCCC none repeat scroll 0 0;
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  position:relative;
  width:200px;
  height:100px;
  overflow:auto;
  }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
	</style>
<script src="jquery.min.js"></script>
</head>
<body>

<div class="demo"><h1>lalala</h1><p>Hello</p></div>

<script>

$("div.demo").scrollLeft(300);


</script>
</body>
</html>

演示: