Home > Developer > JavaScript
From: http://www.codefans.net/jscss/code/1639.shtml
In actual application, the elements in the demo will have a width style, so I always see that scrolltop is always less than offsettop. That is, the height from demo2 to the top of the demo is always greater than the maximum height that the scroll bar can reach, so the if statement will not be entered. After modification, it will be available in my project. Pai_^
<Body> <Div id = "Demo" style = "overflow: hidden; Height: 80px; width: 280px; "> <ul id =" demo1 "> <li> <a href ="/soft/4085.shtml "target =" _ blank "> XP menu imitation QQ menu manager left menu </ a> </LI> <li> <a href = "/soft/5884.shtml" target = "_ blank"> multi-layer nested layer expansion </a> </LI> <li> <a href = "/soft/1852.shtml" target = "_ blank"> Java2 core technology Volume 2: advanced features version 7th </a> </LI> <li> <a href = "/soft/1286.shtml" target = "_ blank"> pack and download CSS and HTML tutorials (CHM) </a> </LI> <li> <a href = "/soft/4216.shtml" target = "_ blank"> CHM, Chinese fourth edition of C ++ primer </> </LI> <li> <a href = "/soft/3388.shtml" target = "_ blank"> C ++ Wage Management System (ACCESS) </a> </LI> <li> <a href = "/soft/2009.shtml" target = "_ blank"> JS folding menu on the Left bar of very cool </a> </LI> </ul> <Div id = "demo2"> </div> <SCRIPT> var speed = 40; vaR demo = document. getelementbyid ("Demo"); var demo2 = document. getelementbyid ("demo2"); var demo1 = document. getelementbyid ("demo1"); demo2.innerhtml = demo1.innerhtml; var demomaxoffsettop = demo. scrollHeight-demo.offsetHeight; // The maximum scrolltop function of the demo marquee () {If (demomaxoffsettop-demo. scrolltop <= 0) {demo. scrolltop-= demo1.offsetheight;} else {demo. scrolltop ++ ;}}var mymar = setinterval (marquee, speed); demo. onmouseover = function () {clearinterval (mymar);} demo. onmouseout = function () {mymar = setinterval (marquee, speed) ;}</SCRIPT> </body>
Understanding of scolltop, offsettop, and offsetheight:
From http://www.cnblogs.com/borthers11/articles/566243.html
7. scrolltop
The distance from the top of the object to the top edge of the object in the range displayed in the current window.
That is, the distance pulled by the scroll bar when a vertical scroll bar appears.
1. offsettop:
The distance from the current object to the top of the upper layer.
You cannot assign a value to the object. Use the style. Top attribute to set the distance from the object to the top of the page.
4. offsetheight:
And style. the difference between the height attribute is that, for example, if the object width is set to the percentage height, the style is displayed regardless of whether the page is larger or smaller. height returns this percentage, while offsetheight returns the object height value on different pages, instead of the percentage value.
2. offsetleft:
The distance from the current object to the left of its upper layer.
You cannot assign a value to the object. Use the style. Left attribute to set the distance from the object to the left of the page.
3. offsetwidth:
The width of the current object.
And style. the difference between the width attribute is that, for example, if the width of an object is set to the percentage width, the style is displayed regardless of whether the page is larger or smaller. both width return this percentage, while offsetwidth returns the width value of the object in different pages instead of the percentage value.
5. offsetparent:
The upper-level object of the current object.
Note. if the object is included in a DIV, this Div will not be treated as the parent layer of the object (that is, the parent layer of the object will skip the DIV object) when the upper layer is a table, no problem occurs.
This attribute can be used to obtain the absolute position of the current object on pages of different sizes.
6. scrollleft:
The leftmost distance from the object to the left of the object in the range displayed in the current window.
That is, the distance pulled by the scroll bar when a horizontal scroll bar appears.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
