scrollLeft/scrollTop – width/height of the scrolled out upper part of the element, starting from its upper-left corner.Īll properties are read-only except scrollLeft/scrollTop that make the browser scroll the element if changed.scrollWidth/scrollHeight – the width/height of the content, just like clientWidth/clientHeight, but also include scrolled-out, invisible part of the element.clientWidth/clientHeight – the width/height of the content including paddings, but without the scrollbar.For right-to-left OS the vertical scrollbar is on the left so clientLeft includes its width too. For left-to-right OS they are always the widths of left/top borders. clientLeft/clientTop – the distances from the upper-left outer corner to the upper-left inner (content + padding) corner.offsetWidth/offsetHeight – “outer” width/height of an element including borders.offsetLeft/offsetTop – coordinates relative to the upper-left edge of offsetParent.offsetParent – is the nearest positioned ancestor or td, th, table, body.SummaryĮlements have the following geometry properties: Please note that the described difference is only about reading getComputedStyle(.).width from JavaScript, visually everything is correct. That’s because Firefox returns the CSS width and other browsers return the “real” width. But Firefox shows 300px, while Chrome and Edge show less. On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. The element with text has CSS width:300px. If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below. Such cross-browser differences is the reason not to use getComputedStyle, but rather rely on geometry properties. Firefox) – CSS width (ignore the scrollbar). We can achieve this by setting the overflow property of the full-page-width container div (the full width of the page) to hidden. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. …But with getComputedStyle(elem).width the situation is different. And clientWidth/clientHeight take that into account. So the real width available for the content is less than CSS width. Sometimes the code that works fine without a scrollbar becomes buggy with it, because a scrollbar takes the space from the content in some browsers. So here CSS width is useless.Īnd there’s one more reason: a scrollbar. document.querySelector( '.scrollable').Alert( getComputedStyle(elem).width ) // autoįrom the CSS standpoint, width:auto is perfectly normal, but in JavaScript we need an exact size in px that we can use in calculations. If you want to apply it to multiple elements, it is as easy as iterating over them and applying them to the same function. Now, what if we want to enable or disable this dynamically? Here’s an example with a couple of buttons, one to disable the scroll and another one to enable it: If you need to provide support for IE 11 you might need to add a fallback for the passive event param as it is not supported check if the passive event is supported. This way the browser is aware of it and can decide how to treat the event. This is actually because we have to tell browsers that, eventually, we might call preventDefault and cancel the default behavior. document.querySelector( '#scrollable').addEventListener( 'wheel', preventScroll, on the event listener. Something as simple as this, where #scrollable would be the ID of our scrollable element. One of the options is to listen to the wheel event on the element you want to prevent the scrolling and then prevent the default behavior as well as stopping the propagation and returning a false value. Although in general terms the CSS solution is the most adopted one, JavaScript offers you a bit more of control and flexibility and allows you to decide how exactly you want to stop the scrolling. Depending on your use case, you can choose between JavaScript and CSS solutions. If you ever need to temporally disable scrolling on a specific scrollable element, then you will need to use JavaScript or CSS for it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |