.scrollLeft()

.scrollLeft()

Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

.scrollLeft()Returns: Integer

Description: Get the current horizontal position of the scroll bar for the first element in the set of matched elements.

The horizontal scroll position is the same as the number of pixels that are hidden from view to the left of the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be 0.

Note:.scrollLeft(), when called directly or animated as a property using .animate(), will not work if the element it is being applied to is hidden.

Example:

Get the scrollLeft of a paragraph.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text( "scrollLeft:" + p.scrollLeft() );
</script>
 
</body>
</html>

Demo:

.scrollLeft( value )Returns: jQuery

Description: Set the current horizontal position of the scroll bar for each of the set of matched elements.

The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollLeft positions the horizontal scroll of each matched element.

Example:

Set the scrollLeft of a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft demo</title>
  <style>
  div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    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="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
 
<script>
$( "div.demo" ).scrollLeft( 300 );
</script>
 
</body>
</html>

Demo:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquery.com/scrollLeft

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部