Login/Register
How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?
Asked Answered
Solved javascripthtmlcssjquery-mobilescroll
T

12

34

I created a website with jQueryMobile for iOS and Android.

I don't want the document itself to scroll. Instead, just an area (a <div> element) should be scrollable (via css property overflow-y:scroll).

So I disabled document scrolling via:

$(document).bind("touchstart", function(e){
    e.preventDefault();
});

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

But that will also disable scrolling for all other elements in the document, no matter if overflow:scroll is set or not.

How can I solve this?

Tilda answered 28/2, 2013 at 10:4 Comment(0)
T
12

Finally, I got it to work. Really simple:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
    var $this = $(this);
    var layer = $layer.get(0);

    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});
Tilda answered 22/3, 2013 at 23:37 Comment(6)
Can you help me understand your code a bit better? what does #theDiv and 'scroller' mean? – Bedroom
@Bedroom I'm sorry, there was a typo in my answer. theDiv and scroller are actually the same object. It's the div container which should be scrolled. I corrected that in my answer. – Tilda
Hello. I bupmed into this, and would really like a complete solution for both touch AND mouse events. Can someone elaborate please? – Fahland
This is the best and simplest solution I've seen for this and I've been researching this problem for days. However, this script only prevents the document scrolling if you are at the top of the scrollable div not if you scroll at the bottom of the div. This works in iOS7! – Manslaughter
you might want to stick document.getElementById('scroller') in a variable rather than calling it three times in a row. – Fumigate
Really good answer. This is a nice way to actually prevent browsers from scrolling something other than the modal. – Phonetist
A
24

How about this CSS only solution:

https://jsfiddle.net/Volker_E/jwGBy/24/

body gets position: fixed; and every other element you wish an overflow: scroll;. Works on mobile Chrome (WebKit)/Firefox 19/Opera 12.

You'll also see my various attempts towards a jQuery solution. But as soon as you're binding touchmove/touchstart to document, it hinders scrolling in the child div no matter if unbinded or not.

Disclaimer: Solutions to this problem are in many ways basically not very nice UX-wise! You'll never know how big the viewport of your visitors exactly is or which font-size they are using (client user-agent style like), therefore it could easily be, that important content is hidden to them in your document.

Arnone answered 28/2, 2013 at 14:41 Comment(15)
Hm, your idea is not bad but unfortunately using position:fixed on <body> completely breaks my layout which relies on <body> to be static :-( – Tilda
Hmm, I probably haven't understood what you'd like to accomplish. Isn't it the same when you don't want document scrolling? I mean you could leave body fixed and setting a wrapper div static. Perhaps you've got an URL to look at? – Arnone
Hey, the problem's like this: I have a website with a <div> element inside <body>. This div has overflow-y:auto;-webkit-overflow-scrolling:touch set. When its content overflows, the user can scroll inside it. However, when you scroll down to the very bottom or the very top and you release the finger from the screen and then scroll again, it will scroll the document outside the div (because the end of the div has been reached) and not the div itself. I don't want that. Thus I simply want to turn off document scrolling. – Tilda
Okay, so but why does your layout break? What is actually happening? Are floats breaking? Because positioning should be left fine by position: fixed; on body. – Arnone
Perhaps: #10238584 is helping you further? – Arnone
Hey, thanks for that link. Tyler Dodge's answer quite solved the problem except for one issue: If there is an iframe inside the scrollable area and the user starts scrolling on that iframe, it won't work. – Tilda
It'd be nice for viewers if you upvote the comment which brought you to the answer for your question. ;) Cheers. – Arnone
Simple and fixed my problem, thank you! The only nuisance is the visible scrollbar that appears... – Mckinzie
If it breaks body's layout, I found that including width: 100% in the body tag fixed it. – Grain
@Grain But then you have to care about body margin. I've updated the fiddle jsfiddle.net/Volker_E/jwGBy/104 to include box-sizing and padding instead of margin. – Arnone
In your disclaimer you said this solution is only useful when there's no important content to risk being hidden if the viewport is too short… i.e. this only works if the body has nothing overflowing… case which doesn't need this solution in first place. The body will not scroll anyway, with or without this solution. – Japanese
@Japanese You're right if people coming here might just think about mobile usage only, but there might be a different group of people using this on a desktop client or responsive site as well, where they'd rather easily run into the situation where fixed positioned body results in unwanted side-effects. – Arnone
@Volker E. This solution is so simple, I'm amazed! I've used overflow hidden on body, but thats similar, awesome job – Gestalt
The easiest solution I found so far and works like a charm in my setup. I was struggling with this a long time with JS preventDefault and other option but this works just great. Thanks – Doc
I'm trying to understand how this is working for people. If I open the jsfiddle on my mobile device the over scroll falls to the parent. – Intellectual
T
12

Finally, I got it to work. Really simple:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
    var $this = $(this);
    var layer = $layer.get(0);

    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});
Tilda answered 22/3, 2013 at 23:37 Comment(6)
Can you help me understand your code a bit better? what does #theDiv and 'scroller' mean? – Bedroom
@Bedroom I'm sorry, there was a typo in my answer. theDiv and scroller are actually the same object. It's the div container which should be scrolled. I corrected that in my answer. – Tilda
Hello. I bupmed into this, and would really like a complete solution for both touch AND mouse events. Can someone elaborate please? – Fahland
This is the best and simplest solution I've seen for this and I've been researching this problem for days. However, this script only prevents the document scrolling if you are at the top of the scrollable div not if you scroll at the bottom of the div. This works in iOS7! – Manslaughter
you might want to stick document.getElementById('scroller') in a variable rather than calling it three times in a row. – Fumigate
Really good answer. This is a nice way to actually prevent browsers from scrolling something other than the modal. – Phonetist
J
12

Maybe I misunderstood the question, but if I'm correct:

You want not to be able to scroll except a certain element so you:

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

Prevent everything within the document.

Why don't you just stop the event bubbling on the element where you wish to scroll? (PS: you don't have to prevent touchstart -> if you use touch start for selecting elements instead of clicks that is prevented as well, touch move is only needed because then it is actually tracing the movement)

$('#element').on('touchmove', function (e) {
     e.stopPropagation();
});

Now on the element CSS

#element {
   overflow-y: scroll; // (vertical) 
   overflow-x: hidden; // (horizontal)
}

If you are on a mobile device, you can even go a step further. You can force hardware accelerated scrolling (though not all mobile browsers support this);

Browser Overflow scroll:

Android Browser Yes
Blackberry Browser  Yes
Chrome for Mobile   Yes
Firefox Mobile  Yes
IE Mobile           Yes
Opera Mini          No
Opera Mobile    Kinda
Safari          Yes

#element.nativescroll {
    -webkit-overflow-scrolling: touch;
}

normal:

<div id="element"></div>

native feel:

<div id="element" class="nativescroll"></div>
Jenisejenkel answered 17/5, 2014 at 19:45 Comment(4)
Does this solution work for anyone? Not for me. Once the Top layer reaches the end of its scroll, then the scrolling continues for the bottom (behind the overlay) layer. – Selfcongratulation
Awh, this is so close to the perfect solution. Works on everything but on my phone. I can see the scroll bar of the element I want to scroll, but nothing happens when I swipe. – Apiarist
This works absolutely wonderfully. @Selfcongratulation 's concern about the bottom layer scrolling once the top layer has reached the end is not an issue for me. In my case, the bottom layer will bounce back to its normal position. I only want to prevent scrolling normally because it's a web canvas, but if scrolling does happen, it will fix itself, and not compromise the experience – Williawilliam
Thank you so much, you saved my day with this: -webkit-overflow-scrolling: touch <3 – Ellery
S
3

Here is a solution I am using:

$scrollElement is the scroll element, $scrollMask is a div with style position: fixed; top: 0; bottom: 0;. The z-index of $scrollMask is smaller than $scrollElement.

$scrollElement.on('touchmove touchstart', function (e) {
    e.stopPropagation();
});

$scrollMask.on('touchmove', function(e) {
    e.stopPropagation();
    e.preventDefault();
});
Scriptwriter answered 13/8, 2014 at 7:44 Comment(1)
Can you elaborate more on this example, maybe a jsfiddle? I'm not sure I understand what the mask and element are in relation to each other or how to use them. – Hertzfeld
I
3

I was looking for a solution that did not require calling out specific areas that should scroll. Piecing together a few resources, here is what worked for me:

    // Detects if element has scroll bar
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.outerHeight();
    }

    $(document).on("touchstart", function(e) {
        var $scroller;
        var $target = $(e.target);

        // Get which element could have scroll bars
        if($target.hasScrollBar()) {
            $scroller = $target;
        } else {
            $scroller = $target
                .parents()
                .filter(function() {
                    return $(this).hasScrollBar();
                })
                .first()
            ;
        }

        // Prevent if nothing is scrollable
        if(!$scroller.length) {
            e.preventDefault();
        } else {
            var top = $scroller[0].scrollTop;
            var totalScroll = $scroller[0].scrollHeight;
            var currentScroll = top + $scroller[0].offsetHeight;

            // If at container edge, add a pixel to prevent outer scrolling
            if(top === 0) {
                $scroller[0].scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                $scroller[0].scrollTop = top - 1;
            }
        }
    });

This code requires jQuery.

Sources:

Update

I needed a vanilla JavaScript version of this, so the following is a modified version. I implemented a margin-checker and something that explicitly allows input/textareas to be clickable (I was running into issues with this on the project I used it on...it may not be necessary for your project). Keep in mind this is ES6 code.

const preventScrolling = e => {
    const shouldAllowEvent = element => {
        // Must be an element that is not the document or body
        if(!element || element === document || element === document.body) {
            return false;
        }

        // Allow any input or textfield events
        if(['INPUT', 'TEXTAREA'].indexOf(element.tagName) !== -1) {
            return true;
        }

        // Get margin and outerHeight for final check
        const styles = window.getComputedStyle(element);
        const margin = parseFloat(styles['marginTop']) +
            parseFloat(styles['marginBottom']);
        const outerHeight = Math.ceil(element.offsetHeight + margin);

        return (element.scrollHeight > outerHeight) && (margin >= 0);
    };

    let target = e.target;

    // Get first element to allow event or stop
    while(target !== null) {
        if(shouldAllowEvent(target)) {
            break;
        }

        target = target.parentNode;
    }

    // Prevent if no elements
    if(!target) {
        e.preventDefault();
    } else {
        const top = target.scrollTop;
        const totalScroll = target.scrollHeight;
        const currentScroll = top + target.offsetHeight;

        // If at container edge, add a pixel to prevent outer scrolling
        if(top === 0) {
            target.scrollTop = 1;
        } else if(currentScroll === totalScroll) {
            target.scrollTop = top - 1;
        }
    }
};

document.addEventListener('touchstart', preventScrolling);
document.addEventListener('mousedown', preventScrolling);
Iconoclast answered 16/4, 2015 at 20:0 Comment(0)
B
2

In my case, I have a scrollable body and a scrollable floating menu over it. Both have to be scrollable, but I had to prevent body scrolling when "floating menu" (position:fixed) received touch events and was scrolling and it reached top or bottom. By default browser then started to scroll the body.

I really liked jimmont's answer, but unfortunatelly it did not work well on all devices and browsers, especially with a fast and long swipe.

I ended up using MOMENTUM SCROLLING USING JQUERY (hnldesign.nl) on floating menu, which prevents default browser scrolling and then animates scrolling itself. I include that code here for completeness:

/**
 * jQuery inertial Scroller v1.5
 * (c)2013 hnldesign.nl
 * This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
 **/
/*jslint browser: true*/
/*global $, jQuery*/

/* SETTINGS */
var i_v = {
    i_touchlistener     : '.inertialScroll',         // element to monitor for touches, set to null to use document. Otherwise use quotes. Eg. '.myElement'. Note: if the finger leaves this listener while still touching, movement is stopped.
    i_scrollElement     : '.inertialScroll',         // element (class) to be scrolled on touch movement
    i_duration          : window.innerHeight * 1.5, // (ms) duration of the inertial scrolling simulation. Devices with larger screens take longer durations (phone vs tablet is around 500ms vs 1500ms). This is a fixed value and does not influence speed and amount of momentum.
    i_speedLimit        : 1.2,                      // set maximum speed. Higher values will allow faster scroll (which comes down to a bigger offset for the duration of the momentum scroll) note: touch motion determines actual speed, this is just a limit.
    i_handleY           : true,                     // should scroller handle vertical movement on element?
    i_handleX           : true,                     // should scroller handle horizontal movement on element?
    i_moveThreshold     : 100,                      // (ms) determines if a swipe occurred: time between last updated movement @ touchmove and time @ touchend, if smaller than this value, trigger inertial scrolling
    i_offsetThreshold   : 30,                       // (px) determines, together with i_offsetThreshold if a swipe occurred: if calculated offset is above this threshold
    i_startThreshold    : 5,                        // (px) how many pixels finger needs to move before a direction (horizontal or vertical) is chosen. This will make the direction detection more accurate, but can introduce a delay when starting the swipe if set too high
    i_acceleration      : 0.5,                      // increase the multiplier by this value, each time the user swipes again when still scrolling. The multiplier is used to multiply the offset. Set to 0 to disable.
    i_accelerationT     : 250                       // (ms) time between successive swipes that determines if the multiplier is increased (if lower than this value)
};
/* stop editing here */

//set some required vars
i_v.i_time  = {};
i_v.i_elem  = null;
i_v.i_elemH = null;
i_v.i_elemW = null;
i_v.multiplier = 1;

// Define easing function. This is based on a quartic 'out' curve. You can generate your own at http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm
if ($.easing.hnlinertial === undefined) {
    $.easing.hnlinertial = function (x, t, b, c, d) {
        "use strict";
        var ts = (t /= d) * t, tc = ts * t;
        return b + c * (-1 * ts * ts + 4 * tc + -6 * ts + 4 * t);
    };
}

$(i_v.i_touchlistener || document)
    .on('touchstart touchmove touchend', function (e) {
        "use strict";
        //prevent default scrolling
        e.preventDefault();
        //store timeStamp for this event
        i_v.i_time[e.type]  = e.timeStamp;
    })
    .on('touchstart', function (e) {
        "use strict";
        this.tarElem = $(e.target);
        this.elemNew = this.tarElem.closest(i_v.i_scrollElement).length > 0 ? this.tarElem.closest(i_v.i_scrollElement) : $(i_v.i_scrollElement).eq(0);
        //dupecheck, optimizes code a bit for when the element selected is still the same as last time
        this.sameElement = i_v.i_elem ? i_v.i_elem[0] == this.elemNew[0] : false;
        //no need to redo these if element is unchanged
        if (!this.sameElement) {
            //set the element to scroll
            i_v.i_elem = this.elemNew;
            //get dimensions
            i_v.i_elemH = i_v.i_elem.innerHeight();
            i_v.i_elemW = i_v.i_elem.innerWidth();
            //check element for applicable overflows and reevaluate settings
            this.i_scrollableY      = !!((i_v.i_elemH < i_v.i_elem.prop('scrollHeight') && i_v.i_handleY));
            this.i_scrollableX    = !!((i_v.i_elemW < i_v.i_elem.prop('scrollWidth') && i_v.i_handleX));
        }
        //get coordinates of touch event
        this.pageY      = e.originalEvent.touches[0].pageY;
        this.pageX      = e.originalEvent.touches[0].pageX;
        if (i_v.i_elem.is(':animated') && (i_v.i_time.touchstart - i_v.i_time.touchend) < i_v.i_accelerationT) {
            //user swiped while still animating, increase the multiplier for the offset
            i_v.multiplier += i_v.i_acceleration;
        } else {
            //else reset multiplier
            i_v.multiplier = 1;
        }
        i_v.i_elem
            //stop any animations still running on element (this enables 'tap to stop')
            .stop(true, false)
            //store current scroll positions of element
            .data('scrollTop', i_v.i_elem.scrollTop())
            .data('scrollLeft', i_v.i_elem.scrollLeft());
    })
    .on('touchmove', function (e) {
        "use strict";
        //check if startThreshold is met
        this.go = (Math.abs(this.pageX - e.originalEvent.touches[0].pageX) > i_v.i_startThreshold || Math.abs(this.pageY - e.originalEvent.touches[0].pageY) > i_v.i_startThreshold);
    })
    .on('touchmove touchend', function (e) {
        "use strict";
        //check if startThreshold is met
        if (this.go) {
            //set animpar1 to be array
            this.animPar1 = {};
            //handle events
            switch (e.type) {
            case 'touchmove':
                this.vertical       = Math.abs(this.pageX - e.originalEvent.touches[0].pageX) < Math.abs(this.pageY - e.originalEvent.touches[0].pageY); //find out in which direction we are scrolling
                this.distance       = this.vertical ? this.pageY - e.originalEvent.touches[0].pageY : this.pageX - e.originalEvent.touches[0].pageX; //determine distance between touches
                this.acc            = Math.abs(this.distance / (i_v.i_time.touchmove - i_v.i_time.touchstart)); //calculate acceleration during movement (crucial)
                //determine which property to animate, reset animProp first for when no criteria is matched
                this.animProp       = null;
                if (this.vertical && this.i_scrollableY) { this.animProp = 'scrollTop'; } else if (!this.vertical && this.i_scrollableX) { this.animProp = 'scrollLeft'; }
                //set animation parameters
                if (this.animProp) { this.animPar1[this.animProp] = i_v.i_elem.data(this.animProp) + this.distance; }
                this.animPar2       = { duration: 0 };
                break;
            case 'touchend':
                this.touchTime      = i_v.i_time.touchend - i_v.i_time.touchmove; //calculate touchtime: the time between release and last movement
                this.i_maxOffset    = (this.vertical ? i_v.i_elemH : i_v.i_elemW) * i_v.i_speedLimit; //(re)calculate max offset
                //calculate the offset (the extra pixels for the momentum effect
                this.offset         = Math.pow(this.acc, 2) * (this.vertical ? i_v.i_elemH : i_v.i_elemW);
                this.offset         = (this.offset > this.i_maxOffset) ? this.i_maxOffset : this.offset;
                this.offset         = (this.distance < 0) ? -i_v.multiplier * this.offset : i_v.multiplier * this.offset;
                //if the touchtime is low enough, the offset is not null and the offset is above the offsetThreshold, (re)set the animation parameters to include momentum
                if ((this.touchTime < i_v.i_moveThreshold) && this.offset !== 0 && Math.abs(this.offset) > (i_v.i_offsetThreshold)) {
                    if (this.animProp) { this.animPar1[this.animProp] = i_v.i_elem.data(this.animProp) + this.distance + this.offset; }
                    this.animPar2   = { duration: i_v.i_duration, easing : 'hnlinertial', complete: function () {
                        //reset multiplier
                        i_v.multiplier = 1;
                    }};
                }
                break;
            }

            // run the animation on the element
            if ((this.i_scrollableY || this.i_scrollableX) && this.animProp) {
                i_v.i_elem.stop(true, false).animate(this.animPar1, this.animPar2);
            }
        }
    });

Another observation: I also tried various combinations of e.stopPropagation() on menu div and e.preventDefault() on window/body at touchmove event, but without success, I only managed to prevent scrolling I wanted and not scrolling I did not want. I also tried to have a div over whole document, with z-index between document and menu, visible only between touchstart and touchend, but it did not receive touchmove event (because it was under menu div).

Beaumarchais answered 29/9, 2014 at 8:22 Comment(0)
R
0

Here is a solution that uses jQuery for the events.

var stuff = {};
$('#scroller').on('touchstart',stuff,function(e){
  e.data.max = this.scrollHeight - this.offsetHeight;
  e.data.y = e.originalEvent.pageY;
}).on('touchmove',stuff,function(e){
  var dy = e.data.y - e.originalEvent.pageY;
  // if scrolling up and at the top, or down and at the bottom
  if((dy < 0 && this.scrollTop < 1)||(dy > 0 && this.scrollTop >= e.data.max)){
    e.preventDefault();
  };
});
Remittee answered 31/7, 2013 at 19:19 Comment(0)
I
0

First position the innerScroller wherever you want on the screen and then fix outerScroller by setting it css to 'hidden'. When you want to restore it you can set it back to 'auto' or 'scroll', whichever you used previously.

Intestine answered 27/5, 2015 at 18:13 Comment(0)
C
0

Here is my implementation which works on touch devices and laptops.

function ScrollManager() {
    let startYCoord;

    function getScrollDiff(event) {
        let delta = 0;

        switch (event.type) {
            case 'mousewheel':
                delta = event.wheelDelta ? event.wheelDelta : -1 * event.deltaY;
                break;
            case 'touchstart':
                startYCoord = event.touches[0].clientY;
                break;
            case 'touchmove': {
                const yCoord = event.touches[0].clientY;

                delta = yCoord - startYCoord;
                startYCoord = yCoord;
                break;
            }
        }

        return delta;
    }

    function getScrollDirection(event) {
        return getScrollDiff(event) >= 0 ? 'UP' : 'DOWN';
    }

    function blockScrollOutside(targetElement, event) {
        const { target } = event;
        const isScrollAllowed = targetElement.contains(target);
        const isTouchStart = event.type === 'touchstart';

        let doScrollBlock = !isTouchStart;

        if (isScrollAllowed) {
            const isScrollingUp = getScrollDirection(event) === 'UP';
            const elementHeight = targetElement.scrollHeight - targetElement.offsetHeight;

            doScrollBlock =
                doScrollBlock &&
                ((isScrollingUp && targetElement.scrollTop <= 0) ||
                    (!isScrollingUp && targetElement.scrollTop >= elementHeight));
        }

        if (doScrollBlock) {
            event.preventDefault();
        }
    }

    return {
        blockScrollOutside,
        getScrollDirection,
    };
}

const scrollManager = ScrollManager();
const testBlock = document.body.querySelector('.test');

function handleScroll(event) {
  scrollManager.blockScrollOutside(testBlock, event);
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('mousewheel', handleScroll);
window.addEventListener('touchstart', handleScroll);
window.addEventListener('touchmove', handleScroll);
.main {
   border: 1px solid red;
   height: 200vh;
 }
 
 .test {
   border: 1px solid green;
   height: 300px;
   width: 300px;
   overflow-y: auto;
   position: absolute;
   top: 100px;
   left: 50%;
 }
 
 .content {
   height: 100vh;
 }
<div class="main">
  <div class="test">
    <div class="content"></div>
  </div>
</div>
Chengtu answered 28/2, 2018 at 16:32 Comment(0)
A
0

This is what worked for me for Android and IOS devices.

Imagine that we have a div class="backdrop"> element that we don't want to be scrolled, ever. But we want to be able to scroll over an element that is on top of this backdrop.

function handleTouchMove(event) {
    const [backdrop] = document.getElementsByClassName('backdrop');
    const isScrollingBackdrop = backdrop === event.target;

    isScrollingBackdrop ? event.preventDefault() : event.stopPropagation();
}

window.addEventListener('touchmove', handleTouchMove, { passive: false });

So, we listen to the touchmove event, if we're scrolling over the backdrop, we prevent it. If we're scrolling over something else, we allow it but stop its propagation so it doesn't scroll also the backdrop.

Of course this is pretty basic and can be re-worked and expanded a lot, but this is what fixed my issue in a VueJs2 project.

Hope it helps! ;)

Anagnos answered 8/11, 2018 at 11:31 Comment(0)
P
0

I was able to disable scrolling of the main document by adding css "overflow-y: hidden" on HTML.

It did not mess with positioning at all.

Phonetist answered 25/10, 2019 at 3:38 Comment(0)
D
0

Now all major browsers have support for overscroll-behavior CSS rule: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

So it might solve your problem if you add this style to you div: overscroll-behavior: none;

Dyaus answered 18/4, 2024 at 17:38 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.