iOS 在 Safari 中禁用 Scroll-Rails

Question

我构建了一个 website 依赖于对角线滚动的用户体验。

当前的实现在我测试的每个浏览器上都运行良好（Chrome 用于移动和桌面，Firefox 用于移动和桌面，Safari 用于桌面）...除了 Safari 用于 iOS。

好像有一些滚动栏杆功能在运行：如果第一个滚动条是对角线的，您可以沿对角线、水平和垂直方向拖动页面。

但是，一旦您垂直或水平拖动页面，滚动就会“锁定”并且您只能滚动 X 或 Y，不能同时滚动。

有什么方法可以禁用此功能，或者至少解决这个问题？

显然，您可以将 ms-scroll-rails 设置为 none 以防止在 IE 上出现这种行为...Safari 有类似的功能吗？

如果你想重现这个问题，我做了一个简化版的我的网站，它也不能在 Safari 中对角滚动（同时 X 和 Y）iOS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, height=device-height,initial-scale=1'>

    <title>Diagonal Scrolling on iOS</title>

    <link rel='stylesheet' href='/global.css'>
    <style>
        html {
            box-sizing: border-box;
        }

        *,
        *::before,
        *::after {
            box-sizing: inherit;
        }

        body {
            width: 200vmax;
            height: 200vmax;
            background-color: #DFDBE5;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            margin: 0;
        }

        .heroview h1 {
            text-align: center;
            color: black;
            font-size: 4vh;
            line-height: 1.6;
            padding: 0;
            margin-top: 30vh;
        }

        .heroview h2 {
            text-align: center;
            color: black;
            font-size: 2.5vh;
            line-height: 1.6;
            padding: 0;
        }

        .heroview {
            position: fixed;
            z-index: 0;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>

    <body>
        <div class="heroview">
            <h1>FixedLogo</h1>
            <h2>THIS IS SOME TEXT <br> DESCRIBING THE TITLE</h2>
        </div>
    </body>
</body>
<script>
    if ("scrollRestoration" in window.history) {
        window.history.scrollRestoration = "manual";
    }
    window.onload = () => { scrollTo(window.innerWidth / 2, window.innerHeight / 2) };
</script>

</html>

Answer 1

我不知道 iOS 滚动栏杆的工作原理或原因。

我通过避免使正文具有滚动条来实现它，而是将溢出的内容放在与视口具有相同大小的根 div 中。

这个解决方案有两个问题。

固定在页面中央的heroview文本，无法交互。

.heroview {
  ...
  pointer-events: none; // disable pointer interaction
}

之所以需要 css 属性是因为根 div 的滚动条在视口内，固定英雄与视口具有相同的尺寸，是覆盖它，这样你就不能滚动它了。

您可以通过启用指针事件与 heroview 的后代进行交互。

heroview h1 {
  pointer-events: auto;
}

但是如果您尝试滚动并且鼠标恰好悬停在它上面因此没有发生滚动，您运行会遇到同样的问题。

我认为 post 没问题，因为在您的网站上，您的中心英雄文本是 html 标记，也无法进行交互。

iOS Safari 底部导航栏不会消失，因为您只会在根目录内滚动 div。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  padding: 0;
  margin: 0;
}

.root {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

.container {
  width: 200vmax;
  height: 200vmax;
  background-color: #dfdbe5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  margin: 0;
}

.heroview h1 {
  text-align: center;
  color: black;
  font-size: 4vh;
  line-height: 1.6;
  padding: 0;
  margin-top: 30vh;
}

.heroview h2 {
  text-align: center;
  color: black;
  font-size: 2.5vh;
  line-height: 1.6;
  padding: 0;
}

.heroview {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="root">
    <div class="container">
      <div class="heroview">
        <h1>FixedLogo</h1>
        <h2>THIS IS SOME TEXT <br> DESCRIBING THE TITLE</h2>
      </div>
    </div>
  </div>
</body>

</html>

我用 iOS 14.3

测试过

iOS 在 Safari 中禁用 Scroll-Rails

Disable Scroll-Rails in Safari for iOS

html

javascript

css

safari

ios