So, JFYI, you just scrolled a page down to this place. You were able to do it. The problem is – sometimes you should not. And the question you better ask: Why???!!!! Why I shall not scroll?! I glad you asked, and here are 2 different answers, I would provide. – because you shall not. You just opened modal, light box, focused task, or something else, which gonna to . You might not even see the page itself anymore, but being able to scroll no more accessible or visible thought the . First one grab all your attention body modal – scroll is a parasite. Your ability to scroll everything around is a side effect. The default browser behaviour, you could not agree with. Second one And you might wish to disable it. As result, just after creating a modal, you will google about “scroll locks”, and “focus locks”. Focus locks are used to not let html focus escape some area, which is crucial for WAI-ARIA modals. Focus lock is way more important that scroll, and had to be implemented first. Here is another article for you to read: _It is a trap! We got your focus and will not let him out! These words you must hear every time you have opened a modal…_hackernoon.com It’s a (focus) Trap! But! Good modals also has a requirement to make rest of the page to be to user input. There is even a special HTML attribute – – which could disable any user interactions with the node. But it is not ready yet. And too powerful. inert inert Usually focus lock plus some “shade”(lightbox) around a modal is far more acceptable solution. Scroll locks are used to mitigate the last thing – you shall not being able to scroll though modal, and thought shade. How to lock a scroll? First of all, let me point you to an article with quite deep explanation for any scroll related moments, you might face. The article you are reading now is a some sort of continuation of “Martian solution”, as I gonna to name it further. _Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the…_evilmartians.com Scroll to the future - Martian Chronicles You might not read this article right now, but please have a look on animations inside it to jump into the common “scroll” problems. In short — there are 2 common ways to “lock scroll”: . Obliviously! Just set on the body and that’s done! Disable scroll bars overflow:hidden Work pretty well for OSX of Mobile users, as long there is no fixed scroll bars in their browsers, but will ruin Windows users expirence, as long page will change it width just after fixed scroll bars will disapear. Martians: What 15px change in width could change A LOT! 5. You might just , spreading OS X experience to the windows users. But this is not always acceptable. (Martian solution) scroll bars hide .container::-webkit-scrollbar {   display: none; } .container {   -ms-overflow-style: none; } 2. Or you could itself. Bingo?! disable the scroll event Yeah, huge win, but scroll event is “unpreventable”. To prevent scroll you have to prevent the origin of a scroll – wheel or touch event. I hope you heard that doing it, event attach handlers to document to listen for scroll(group) event, idea from scrolling prospective. It will make scroll slooooow. To be more concrete — not as fast as it could be. is not a good performance That is not the case, as long there is no scroll, if you “lock” the scroll. The only question is “how to prevent scroll on body, but not on modal view”. Or even better to rephrase it – “how to prevent scroll from happening outside of modal node”. Or even better to rephrase it – “how to block any events outside the target node”. We need reverse-inert. And that is not a problem actually – just attach event listeners to the DOM, and / all event you can catch. preventDefault stopPropagation Prevent mouseDown, and no click will happen — nor button click, nor click on a link. Even text selection will be disabled. Prevent keyDown, and you will unable to enter any text, switch anything, or Tab to next element. Prevent wheel and touch — and you will disable ability to scroll the page. PS: and you will unable to Tab “back”, and you will not block page scroll in real — only “mouse” way to do it. Don’t block anything! But next you might want to block not all those events, but only outside the modal. Again doable — just check that , ie event has an origin inside “allowed” node. modal.contains(event.target) Only line of code, one check, and… it will not work for scroll. Martian: Scroll chaining visualized “The scroll” first will scroll node-under-mouse, and then, when you will reach “the bottom” — it will scroll anything else scrollable — parent node, or page itself. Martians have provided two possible solutions, second one with CSS, just to disable “overscroll” behavior, but the first one was made in JavaScript! function handleOverscroll(event) {const delta = -event.deltaY;const targetScroll = elem.offsetHeight - delta;const allowedScroll = elem.scrollHeight - elem.scrollTop; if (targetScroll > allowedScroll) {// you are scrolling too farevent.preventDefault();}} Just detect “overscroll” and prevent it. This is how good “scroll-locks”, like , works. But to be the best, that logic should be contain a few more lines, to accumulate all the “delta” allowed to be applied. Cos you might have scrollable inside a scrollable, and that scrollable could be hidden inside a Lock. react-scroll-captor The solution , or, to be short 🔒-y, — is the solution I could propose for you, the solution to lock the scroll, or to disable any user interactions outside the allowed space. That we are looking for. React-locky reverse-inert 1 — to cast for everything outside inert 2 — to just “scroll lock” some node But better is to touch it. First double check that you can scroll everything, and scroll everything. And then — activate Locky, to test how it “should be”. Locky, when enabled, will not allow you to click on the button outside, or scroll the page. It will enable the behavior you customer deserves. You have trained your Scroll well. Live in a peace now. Together. He is a friend, not a foe. Try it by yourself. Give your site a better UX. Make your customers happier. This is literally 2kb of code, and one component to wrap you modal. Easy Win. _react-locky - I am Asgardian God of Event Scoping 🔓, Scroll Locking 📜, Silence Casting 🙊_github.com theKashey/react-locky React-Locky would block only events, but not hide body scroll bar (which exists only on Windows). To remove any ability to scroll at all I would recommend: React-scroll-locky — “locky” based scroll remover. Could isolate your components, which may be good.. or bad.. _📜🔒 - React full-cream "anti-scroll" library, you were looking for - theKashey/react-scroll-locky_github.com theKashey/react-scroll-locky React-remove-scroll — “react-compatible” scroll remover, friendly with portals, which handles only scroll events. Small and safe to use _Removes and disables 📜in a "React" way. Contribute to theKashey/react-remove-scroll development by creating an account…_github.com theKashey/react-remove-scroll React-Focus-On — complete solution for modals. Just everything in one place _The final solution for WAI ARIA compatible modal dialogs or full-screen tasks. - theKashey/react-focus-on_github.com theKashey/react-focus-on Yes — I’ve invested some time in scroll locking :)

Too Long; Didn't Read

Making security fun one episode at a time

How to train a your Scroll

Too Long; Didn't Read

Anton Korzunov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to train a your Scroll

Too Long; Didn't Read

Anton Korzunov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES