iOS Safari – 如何禁用过度滚动但允许可滚动 div 正常滚动

IOS

如何禁用 IOS Safari 的过度滚动但允许可滚动的 div 正常滚动？

在开发 IOS Safari 网页应用时，我们经常会遇到一个问题，就是当页面中有一个可滚动的 div 元素时，我们希望用户在滚动这个 div 时能够正常滚动，但是在滚动到底部或顶部时，浏览器不要出现过度滚动的效果。那么如何实现这个效果呢？

为了解决这个问题，我们可以使用 CSS 的属性 overflow-scrolling。这个属性可以控制滚动元素在滚动到边界时是否允许过度滚动。在 IOS Safari 中，这个属性默认是启用的，所以我们需要将它禁用掉，以达到禁止过度滚动的效果。

下面是一个示例代码，演示了如何禁用过度滚动但允许可滚动 div 正常滚动的效果：

html
<!DOCTYPE html>
<html>
<head>
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .scrollable-div {
            width: 300px;
            height: 200px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch; /* 启用过度滚动效果 */
        }
        .scrollable-div.disable-overscroll {
            -webkit-overflow-scrolling: auto; /* 禁用过度滚动效果 */
        }
    </style>
</head>
<body>
    <div class="scrollable-div">
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
        
<img src="https://img.izhida.com/topic/2c56c360580420d293172f42d85dfbed.jpg" alt="CSS"><br>CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
    </div>
    
    <script>
        var scrollableDiv = document.querySelector('.scrollable-div');
        scrollableDiv.addEventListener('touchstart', function(event) {
            // 当滚动到顶部或底部时，禁止 body 的过度滚动效果
            var scrollTop = this.scrollTop;
            var scrollHeight = this.scrollHeight;
            var offsetHeight = this.offsetHeight;
            var touch = event.targetTouches[0];
            if (scrollTop === 0) {
                this.scrollTop = 1;
            } else if (scrollTop + offsetHeight === scrollHeight) {
                this.scrollTop = scrollTop - 1;
            }
        });
        scrollableDiv.addEventListener('touchmove', function(event) {
            // 当滚动到顶部或底部时，禁止 body 的过度滚动效果
            var scrollTop = this.scrollTop;
            var scrollHeight = this.scrollHeight;
            var offsetHeight = this.offsetHeight;
            var touch = event.targetTouches[0];
            if (scrollTop === 0) {
                if (touch.pageY > event.pageY) {
                    event.preventDefault();
                }
            } else if (scrollTop + offsetHeight === scrollHeight) {
                if (touch.pageY < event.pageY) {</p>                    event.preventDefault();
                }
            }
        });
    </script>
</body>
</html>

禁用过度滚动但允许可滚动的 div 正常滚动

通过上述示例代码，我们可以看到，在 .scrollable-div 类的 div 元素中，我们通过将 -webkit-overflow-scrolling 属性设置为 auto 来禁用过度滚动效果。在 JavaScript 部分，我们监听了 touchstart 和 touchmove 事件，并在滚动到顶部或底部时禁止了 body 的过度滚动效果，从而达到了禁用过度滚动但允许可滚动 div 正常滚动的效果。

这样，当用户在 IOS Safari 中滚动这个 div 元素时，将不再出现过度滚动的效果，提升了用户体验。

：

在开发 IOS Safari 网页应用时，我们可以通过禁用 -webkit-overflow-scrolling 属性来禁止过度滚动效果，从而在滚动 div 元素时能够正常滚动。通过监听滚动事件，我们可以在滚动到顶部或底部时禁止 body 的过度滚动效果，以达到更好的用户体验。

希望本文对你理解如何禁用 IOS Safari 的过度滚动效果有所帮助。