|
21 | 21 | <added>1.0</added> |
22 | 22 | </signature> |
23 | 23 | <longdesc> |
24 | | - <p>This method is a shortcut for <code>.on('scroll', handler)</code> in the first and second variations, and <code>.trigger('scroll')</code> in the third.</p> |
| 24 | + <p>This method is a shortcut for <code>.on( "scroll", handler )</code> in the first and second variations, and <code>.trigger( "scroll" )</code> in the third.</p> |
25 | 25 | <p>The <code>scroll</code> event is sent to an element when the user scrolls to a different place in the element. It applies to <code>window</code> objects, but also to scrollable frames and elements with the <code>overflow </code>CSS property set to <code>scroll</code> (or <code>auto</code> when the element's explicit height or width is less than the height or width of its contents).</p> |
26 | 26 | <p>For example, consider the HTML:</p> |
27 | | - <pre><code><div id="target" style="overflow: scroll; width: 200px; height: 100px;"> |
| 27 | + <pre><code> |
| 28 | +<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> |
28 | 29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, |
29 | 30 | sed do eiusmod tempor incididunt ut labore et dolore magna |
30 | 31 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation |
|
37 | 38 | <div id="other"> |
38 | 39 | Trigger the handler |
39 | 40 | </div> |
40 | | -<div id="log"></div></code></pre> |
| 41 | +<div id="log"></div> |
| 42 | +</code></pre> |
41 | 43 | <p>The style definition is present to make the target element small enough to be scrollable:</p> |
42 | 44 | <p class="image"> |
43 | 45 | <img src="/resources/0042_05_11.png" alt=""/> |
44 | 46 | </p> |
45 | 47 | <p>The <code>scroll</code> event handler can be bound to this element:</p> |
46 | | - <pre><code>$('#target').scroll(function() { |
47 | | - $('#log').append('<div>Handler for .scroll() called.</div>'); |
48 | | -});</code></pre> |
| 48 | + <pre><code> |
| 49 | +$( "#target" ).scroll(function() { |
| 50 | + $( "#log" ).append( "<div>Handler for .scroll() called.</div>" ); |
| 51 | +}); |
| 52 | + </code></pre> |
49 | 53 | <p>Now when the user scrolls the text up or down, one or more messages are appended to <code><div id="log"></div></code>:</p> |
50 | 54 | <p> |
51 | 55 | <samp>Handler for .scroll() called.</samp> |
52 | 56 | </p> |
53 | 57 | <p>To trigger the event manually, apply <code>.scroll()</code> without an argument:</p> |
54 | | - <pre><code>$('#other').click(function() { |
55 | | - $('#target').scroll(); |
56 | | -});</code></pre> |
| 58 | + <pre><code> |
| 59 | +$( "#other" ).click(function() { |
| 60 | + $( "#target" ).scroll(); |
| 61 | +}); |
| 62 | + </code></pre> |
57 | 63 | <p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p> |
58 | 64 | <p>A <code>scroll</code> event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.</p> |
59 | 65 | </longdesc> |
60 | 66 | <example> |
61 | 67 | <desc>To do something when your page is scrolled:</desc> |
62 | 68 | <code><![CDATA[ |
63 | | -$("p").clone().appendTo(document.body); |
64 | | -$("p").clone().appendTo(document.body); |
65 | | -$("p").clone().appendTo(document.body); |
66 | | -$(window).scroll(function () { |
67 | | - $("span").css("display", "inline").fadeOut("slow"); |
| 69 | +$( "p" ).clone().appendTo( document.body ); |
| 70 | +$( "p" ).clone().appendTo( document.body ); |
| 71 | +$( "p" ).clone().appendTo( document.body ); |
| 72 | +$( window ).scroll(function() { |
| 73 | + $( "span" ).css( "display", "inline" ).fadeOut( "slow" ); |
68 | 74 | }); |
69 | 75 | ]]></code> |
70 | 76 | <css><![CDATA[ |
71 | | - div { color:blue; } |
72 | | - p { color:green; } |
73 | | - span { color:red; display:none; } |
74 | | - ]]></css> |
75 | | - <html><![CDATA[<div>Try scrolling the iframe.</div> |
76 | | - <p>Paragraph - <span>Scroll happened!</span></p>]]></html> |
| 77 | + div { |
| 78 | + color: blue; |
| 79 | + } |
| 80 | + p { |
| 81 | + color: green; |
| 82 | + } |
| 83 | + span { |
| 84 | + color: red; |
| 85 | + display: none; |
| 86 | + } |
| 87 | +]]></css> |
| 88 | + <html><![CDATA[ |
| 89 | +<div>Try scrolling the iframe.</div> |
| 90 | +<p>Paragraph - <span>Scroll happened!</span></p> |
| 91 | +]]></html> |
77 | 92 | </example> |
78 | 93 | <category slug="events/browser-events"/> |
79 | 94 | <category slug="version/1.0"/> |
|
0 commit comments