Like DOM ,theBOM is actually made up of a lot of APIs . But for the BOM , the most painful is not to remember the API, but obviously remember this API, but did not consider its compatibility.
In the previous article, I talked aboutOffsetseries of attributes, his wide height was made by theBorder,paddingand thewidthcomposed of. And it'soffsetleftand theOffsetTopis relative to theoffsetParentthe distance. Here'soffsetParentrefers to the child box has a positioned parent element, and if the child box does not have a positioned parent element, then itsoffsetParentis thatBody. I talked about it.Offsetseries, you should talk about it.Scrollseries of.
First of all, the two properties of scrollwidth and scrollheight , respectively, are the elements
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>#box{width:100px;Height:100px;Border:5px Solid Red;padding:10px;; } </style></Head><Body> <DivID= "box">La La, LA, LA, I'm so, we are, LA, LA, la. La La, LA, la-la, LA, la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-! LA, LA, LA, and cheer.</Div> <Script> varBox=document.getElementById ("Box"); Console.log (Box.scrollheight); Console.log (Box.offsetheight); </Script></Body></HTML>
The above code outputs the div scrollheight and offsetheight 297 and 130 scrollheight Span style= "font-family: the song Body;" > value of. So don't be too tangled up about why this number is, we just need to know that this value changes as the content changes. scrollheight It is worth the algorithm if the content area is less than the upper and lower padding plus height, then its value is the upper and lower padding plus height, or the content is open to the height. scrolltleft
And after saying scrollheight and scrollleft , it is time to say scrolltop and ScrollLeft , the two values have the same usage. So let's talk about the offsetTop; In general, both properties are used with mouse movement events.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>#box{width:100px;Height:100px;Overflow:Auto; } </style></Head><Body> <DivID= "box">Lao Wang walked the old king walked the old king walked the old king walked the old king walked the old king walked the old Wang walked the old Wang walked Lao Wang the old King went away, the old King walked, the old King walked, and the old king walked.</Div> <Scriptsrc= "Common.js"></Script> <Script> varBox=my$ ("Box"); Box.onscroll= function() {console.log (box.scrolltop); } </Script></Body></HTML>
The above code is executed when the scrollbar is pulled, and the scrolltop of the output div . scrolltop shows the distance that the content area moves up.
The above code gets just the scrolling event in that little div , so what if it's in the page? We can think of the entire page as a div. This time encountered a problem, the page is the body , or html it ? In fact, different browsers have different parsing methods. At this point, we're going to encapsulate the compatibility code.
function Scroll () { return { | | document.documentElement.scrollLeft, | | Document.documentElement.scrollTop };}Here, we encapsulate a scroll function that returns an object that has two properties that can fetch the scrolling distance of the page when called, and if the browser is based on the body To get it or to get it based on HTML is compatible.
BOM Basis (II)
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
