iOS 10 Safari:防止在固定叠加层后面滚动并保持滚动位置

当显示固定位置叠加时,我无法阻止主体内容滚动.类似的问题已被多次询问,但以前工作的所有技术似乎都不适用于iOS 10中的Safari.这似乎是最近的一个问题.

一些说明:

如果我都设为我可以禁用滚动html和body以overflow: hidden,然而,使主体内容滚动到顶部.

如果覆盖中的内容足够长以便可以滚动,则对主页内容正确禁用滚动.如果叠加层中的内容不足以导致滚动,则可以滚动主页面内容.

我在http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/中添加了一个javascript函数,该函数touchmove在叠加显示时禁用.这在以前工作,但不再有效.

这是完整的HTML源代码:

    
    
    
    



    

        ×
        
fixed popover
    

    

        this is the top

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        lots of scrollable content

        asdfasdf

        

        
Show Popover
        

        


    

Bohdan Diduk.. 55

请添加-webkit-overflow-scrolling: touch;到#overlay元素.

并在body标签的末尾添加此javascript代码:

(function () {
    var _overlay = document.getElementById('overlay');
    var _clientY = null; // remember Y position on touch start

    _overlay.addEventListener('touchstart', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            _clientY = event.targetTouches[0].clientY;
        }
    }, false);

    _overlay.addEventListener('touchmove', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            disableRubberBand(event);
        }
    }, false);

    function disableRubberBand(event) {
        var clientY = event.targetTouches[0].clientY - _clientY;

        if (_overlay.scrollTop === 0 && clientY > 0) {
            // element is at the top of its scroll
            event.preventDefault();
        }

        if (isOverlayTotallyScrolled() && clientY < 0) {
            //element is at the top of its scroll
            event.preventDefault();
        }
    }

    function isOverlayTotallyScrolled() {
        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
        return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
    }
}())

我希望它对你有所帮助.

请添加-webkit-overflow-scrolling: touch;到#overlay元素.

并在body标签的末尾添加此javascript代码:

(function () {
    var _overlay = document.getElementById('overlay');
    var _clientY = null; // remember Y position on touch start

    _overlay.addEventListener('touchstart', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            _clientY = event.targetTouches[0].clientY;
        }
    }, false);

    _overlay.addEventListener('touchmove', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            disableRubberBand(event);
        }
    }, false);

    function disableRubberBand(event) {
        var clientY = event.targetTouches[0].clientY - _clientY;

        if (_overlay.scrollTop === 0 && clientY > 0) {
            // element is at the top of its scroll
            event.preventDefault();
        }

        if (isOverlayTotallyScrolled() && clientY < 0) {
            //element is at the top of its scroll
            event.preventDefault();
        }
    }

    function isOverlayTotallyScrolled() {
        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
        return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
    }
}())

我希望它对你有所帮助.

将Bohdan Didukh的方法与我以前的方法相结合，以创建易于使用的npm包来禁用/启用身体滚动。

https://github.com/willmcpo/body-scroll-lock

有关该解决方案如何工作的更多详细信息，请阅读https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177