How to disable scrolling with a custom element?

Ask the community
,
1

I have seen other posts on this topic; however, none of the answers have been detailed enough for me to figure out how to do this. I know how to code in Velo but have no experience with custom elements and don’t really understand how to use them.

I found code online to disable scrolling on Stackoverflow ( [https://stackoverflow. com/questions/4770025/how-to-disable-scrolling-temporarily](https://stackoverflow. com/questions/4770025/how-to-disable-scrolling-temporarily) ) but I am unsure how to implement this on a custom element.

Any help or code is much appreciated! Thanks! :slight_smile:

2

You can try something like this:

//custom code file:
class ScrollControl extends HTMLElement {
    constructor(){
        super();
        this.initiated = false;
        this.initiate = this.initiate.bind(this);
    }
    connectedCallback() {
        if(!this.initiated){this.initiate();}
    }
    static get observedAttributes() {
        return ['scroll-switch'];
    }
    attributeChangedCallback(name) {
        if(!this.initiated){this.initiate();}
        if (name === 'scroll-switch'){
         document.body.classList.toggle('no-scroll');
        }
    }
    initiate(){
            this.initiated = true;
           const style = document.createElement('style');
            style.innerHTML = '.no-scroll {overflow:hidden!important}';
            document.head.appendChild(style);
    }
}
customElements.define('scroll-controller', ScrollControl);

//Page:
function switchScroll(){
$w('#customElemenet').setAttribute('scroll-switch', Date.now().toString() )
}

$w.onReady(() => {
//and when ever you wish to stop scrolling or resume scrolling, run:
switchScroll();
})
3

Thanks for your response! It doesn’t seem to be working on preview nor on my published site (premium plan)… but I think I did it right? Please see the screenshots attached. Thanks again for the help!

2248×1152 335 KB

2394×1108 388 KB

4

@alexpharaon02 I wouldn’t even try checking it on Preview mode, as custom elements get wrapped by an iframe (on Preview mode only) and therefore behave differently.
However, I thought you want to stop scrolling on user event (such as button click, or scrolling down etc…).
I wouldn’t set the attribute just inside the $.onReady as the custom element may not be ready yet.
If you wish to stop scrolling at the first moment it’s possible - remove the code from the page , and set the attribute via the editor (see the red circle below).
Set the Attribute to scroll-switch and the value to any string you want.

2394×1108 306 KB

5

@jonatandor35 Amazing! It works just as expected, thanks a lot!

6

@alexpharaon02 You’re welcome.
but you know that if you want to stop scrolling from page load and never resume it, you don’t need a custom element at all.
You can go to the Site Dashboard > Settings > Custom Code > Add Custom Code

Put this line in there:

<style>body{overflow:hidden;}</style>

Set it to the head and apply to the specific page you need.

7

P.S this will only work on live site.

8

@jonatandor35 Even better! Thanks again :slight_smile:

9

Hi @J. D. unfortunately the code is not working to disable scrolling on the mobile site. It does work however on the desktop version. Any ideas? Thanks a lot!

10

Are you talking about scrolling vertically or horizontally or both?
Which mobile & browser?
Do you need the scrolling sate to be dynamic (i.e. to allow/disallow scrolling when ever you want) or static (i.e never let the user scroll)?

11

Scrolling vertically. I tested it on an iPhone 8 Plus on Safari. I am not sure if Android (or other) phones suffer from the same problem. I need it to be static (never let the user scroll) but I need to be able to scroll to different parts of the page via code in Velo (eg. after they click a button).

12

If you want to stop scrolling at the the top of the page, and not somewhere in the middle, you can try:

style.innerHTML = '.no-scroll {overflow:hidden!important;height: 100%!important;position:fixed!important;}';