在 Safari 中，当您在页面上进行快速滑动时，它会出现“弹性滚动”效果。对于某些 Web 应用程序，这可能会导致用户体验下降，因为它会破坏应用程序自身的滚动行为。如果您想禁用 Safari 中的弹性滚动，本文将介绍如何实现。
原理
Safari 中的弹性滚动是通过使用 CSS 属性 -webkit-overflow-scrolling: touch 实现的。默认情况下，此属性启用弹性滚动。要禁用它，我们需要覆盖此属性并将其设置为 auto。
实现
实现禁用 Safari 中的弹性滚动非常简单。只需添加以下 CSS 样式即可：
---- - --------------------------- ----- -
请注意，我们将样式应用于 body 元素，但您可以将其应用于任何具有滚动条的元素。
示例代码
以下是一个示例代码片段，演示如何在 Web 应用程序中禁用 Safari 中的弹性滚动。
--------- -----
------
------
----- ----------------
-------------- ------- --------- -- --------------
-------
---- -
--------------------------- -----
-
--------
-------
------
---- -------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- - ----- --------- -- -------- ----- ---------- -- --- --------- ------ --------- ------- ------ ---- ----- ---- --------- --------- -- ---- ---- --- --- --------- --------- -- ---- --- --- ---------- ----- --- -------- ---------- ----- -- -------- ------ --- ---- ------- ---- ----- ----- ------- ------ --------- ----------- ----- -------- ------- -- -------- ---------
----------- -- ---- ------- ------ -------- ---- ------- --- ---- ----------- ----- ------ ---- ----- ---- ---- --------- ------------ ---- ---- -------- ------ ---- -- ------ ------ --- --------- ------- ----- --- ------- --- --------- ------ --- ---- -------- --------- -------- -- ---- ----- ----- ------- --------- -- -- ------- ------- ------- ------ -- ---- -------- --- -------- ------ -----------
-------- --------- ---- -- ----- ------- -------- ----------- -------- --- - ------ ----- ----- ------ ------ --- --- ---- ------ ----- ------- --- ----- ----- ----------- ------- ----- ------- ------- --------- --------- --- -- --------- ---------- --- ------ --------- ------- -- ------ ----- ------ --- ----- ------- ---- --- -- ----- ------- ------ -- --- ----- ------- --- --------- ------- ------- ------- ----- ------- ----- ---------- -- --------- ---- ---------- --- --- ----------- ------ ----- --- ---------- ------- ------- ------- ---- -- ----- ------- -------------
------
-------
-------结论
禁用 Safari 中的弹性滚动是一项简单但有用的功能，它可以提高您的 Web 应用程序的用户体验。通过使用上述 CSS 样式，您可以轻松地禁用此功能，以确保您的应用程序在 Safari 上具有一致的滚动行为。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26452