Temporary disable browser scrolling

1

Hi guys,
is it possible to temporary lock the browser scroll by an action?
Ex: clickin a button or on a Timeline or whatever…

2

this example, which i did not test, states out that it’ll work for Desktop, iOs and android …

you may scroll to the vanilla js section …

1 Like
3

thanks Hans, unfortunately I had already found this article, but i'm not a dev and sincerely, it gets me sick :slight_smile:

4

store the scriptlink in the head

<head>
  <script src="some-path-where-you-dump-the-javascript-libraries/lib/bodyScrollLock.js"></script>
</head>

create any hypebehaviour and execute a hype-function which content will be:
bodyScrollLock.disableBodyScroll(/*targetElement*/);

or

bodyScrollLock.enableBodyScroll(/*targetElement*/);

did not test …

1 Like
5

Thanks Hans,
actually it’s working but not at all…
it’s quite weird…i dunno why but depending where i place the mouse, the scrolling is sometimes locked and sometimes don’t…Bizarre…
TargetElement should be “hypedocument”?

6

lock_unlock_body.hype.zip (16.1 KB)

1 Like
7

Yes Hans, It’s exactly as I had set it, but on my project it doesn’t working good.
Actually I got an iFrame on my page, and I want to lock the scroll exactly when the iFrame is in the viewport.
this is what’s happening:

  • When the iFrame is shorter than page height —> scroll page is lock, but it scroll inside the iframe
  • When the iFrame is bigger than page height —> scroll page is working normally

Sorry, for the client’s privacy I can’t load the project…
Anyway, i got it, probably inside the iFrame there’s a code which is making conflict with mine and that’s why it doesn’t work.
I’ll try to convince the client to keep the scroll :slight_smile:
Thanks for your help and your time!
I appreciate

8

an Iframe is a new window for the browser. if your aim is to inherit a behaviour from one window to another you’d have to setup a communication between those.

postMessage is most common for such tasks. there are some examples within the forum. But if you’ve got no scripting experience … it’ll be a challenge.

Have a nice day :slight_smile:

9

yes i’m usign postMessage to change size of HTML widget when you click inside the iFrame, so they already communicate, but probably the guys whose dev the form inside the iframe used some script which make conflict…i dunno…
Anyway thanks a lot Hans!