If it occupied some space, then that space is now free and the content “jumps” to fill it. The drawback of the method is that the scrollbar disappears. We can use the same technique to freeze the scroll for other elements, not just for document.body. The first button freezes the scroll, while the second one releases it.
The page will “freeze” at its current scroll position. To make the document unscrollable, it’s enough to set = "hidden". For instance, when we need to cover the page with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
Sometimes we need to make the document “unscrollable”. This.scrollIntoView(false) Forbid the scrolling The button below scrolls the page to position itself at the window top:Īnd this button scrolls the page to position itself at the bottom: The bottom edge of the element will be aligned with the window bottom.
If top=false, then the page scrolls to make elem appear at the bottom. The upper edge of the element will be aligned with the window top. If top=true (that’s the default), then the page will be scrolled to make elem appear on the top of the window. The call to elem.scrollIntoView(top) scrolls the page to make elem visible. scrollIntoViewįor completeness, let’s cover one more method: elem.scrollIntoView(top). These methods work for all browsers the same way. To scroll to the very beginning, we can use scrollTo(0,0). The method scrollTo(pageX,pageY) scrolls the page to absolute coordinates, so that the top-left corner of the visible part has coordinates (pageX, pageY) relative to the document’s top-left corner. For instance, scrollBy(0,10) scrolls the page 10px down. The method scrollBy(x,y) scrolls the page relative to its current position. We can do the same for the page using /scrollLeft (except Safari, where /Left should be used instead).Īlternatively, there’s a simpler, universal solution: special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY). Regular elements can be scrolled by changing scrollTop/scrollLeft. Text of the sixth line.To scroll the page with JavaScript, its DOM must be fully built.įor instance, if we try to scroll the page with a script in, it won’t work. addEventListener ( 'overflowchanged', OnOverflowChanged, false ) Īlert ( "The visibility of the vertical scrollbar is changed." ) Īlert ( "The visibility of the horizontal scrollbar is changed." ) Īlert ( "The visibility of the horizontal and vertical scrollbars are also changed." ) Īlert ( "The contents overflow horizontally." ) Īlert ( "The contents do not overflow horizontally." ) Īlert ( "The contents overflow vertically." ) Īlert ( "The contents do not overflow vertically." )
0 kommentar(er)
