1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.scrollLeft()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/css/" title="View all posts in CSS">CSS</a></span> | <span class="category"><a href="http://api.jquery.com/category/offset/" title="View all posts in Offset">Offset</a></span> | <span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/style-properties/" title="View all posts in Style Properties">Style Properties</a></span>
</div>
</div>
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#scrollLeft1">scrollLeft() </a><ul><li>.scrollLeft()
</li></ul>
</li>
<li>
<a href="#scrollLeft2">scrollLeft( value ) </a><ul><li>.scrollLeft( value )
</li></ul>
</li>
</ul>
</div>
<div id="scrollLeft1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.scrollLeft()</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Integer">Integer</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Get the current horizontal position of the scroll bar for the first element in the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="scrollLeft"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft()</h4></li></ul>
<div class="longdesc">
<p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be <code>0</code>.</p>
<blockquote><p><strong>Note:</strong> <code>.scrollLeft()</code>, when called directly or animated as a property using <code>.animate()</code> will not work if the element(s) it is being applied to are hidden.</p></blockquote>
</div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples"><div id="example-0">
<h4><span class="desc">Get the scrollLeft of a paragraph.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
<div id="scrollLeft2" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.scrollLeft( value )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Set the current horizontal position of the scroll bar for each of the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="scrollLeft-value">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>.scrollLeft( value )</h4>
<p class="arguement"><strong>value</strong>An integer indicating the new position to set the scroll bar to.</p>
</li></ul>
<div class="longdesc"><p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the <code>scrollLeft</code> positions the horizontal scroll of each matched element.</p></div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples-1"><div id="example-1-0">
<h4><span class="desc">Set the scrollLeft of a div.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!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="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollLeft(300);
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
</div>
</body></html>
|
