This is an example of a
pop-up / module element.

By adding a small bit of custom code and an attribute, you can ensure users engage with your pop-up elements.
CLOSE THIS
UPLOADED LOCK SCROLL GUIDE

Lock Scrolling on Click

Standard Pop-up

This is the default experience with a webflow pop-up interaction

Locked Pop-up

Pop-up with custom attribute.
Locked overlay

Product Submission by
@Alex Iglesias.
1

Add the script into your Custom Code Section.

The first step involves copy the script to the right.

This should be pasted into the bottom custom code section (before /body)

<!-- Disable Scroll Script -->
<script>
var Webflow = Webflow || [];
let $body = $(document.body);
let scrollPosition = 0;

Webflow.push(function () {
    $('[scroll=disable]').on('click', function () {
        let oldWidth = $body.innerWidth();
        scrollPosition = window.pageYOffset;
        $body.css('overflow', 'hidden');
        $body.css('position', 'fixed');
        $body.css('top', `-${scrollPosition}px`);
        $body.width(oldWidth);
    });
    $('[scroll=enable]').on('click', function () {
        if ($body.css('overflow') != 'hidden') { scrollPosition = window.pageYOffset; }
        $body.css('overflow', '');
        $body.css('position', '');
        $body.css('top', '');
        $body.width('');
        $(window).scrollTop(scrollPosition);
    });
    $('[scroll=both]').on('click', function () {
        if ($body.css('overflow') != 'hidden') {
            let oldWidth = $body.innerWidth();
            scrollPosition = window.pageYOffset;
            $body.css('overflow', 'hidden');
            $body.css('position', 'fixed');
            $body.css('top', `-${scrollPosition}px`);
            $body.width(oldWidth);
        } else {
            $body.css('overflow', '');
            $body.css('position', '');
            $body.css('top', '');
            $body.width('');
            $(window).scrollTop(scrollPosition);
        }
    });
});
</script>
2

Add a custom attribute to the buttons that will open and close the popup.

Add a custom attribute for 'scroll' to the button you wish to use for opening and closing the popup. Alternatively you can use "both" to use the same button.

Note: adding a custom attribute in Webflow, can be done under the Element Settings and in the custom attributes section add Name=scroll | Value=action without quotes (" ").


scroll="disable" for those elements that must disable scrolling when clicked.
scroll="enable" for those elements that must enable scrolling when clicked.
scroll="both" for those elements that must disable scrolling on first click and re-enable scrolling on second click. If you are not planning to use this feature, just delete it from the code.
</script>