在 Mac OS X 上禁用滚动 Safari 9答案

【问题标题】：Disable scrolling Safari 9 on Mac OS X在 Mac OS X 上禁用滚动 Safari 9
【发布时间】：2015-12-13 06:46:09
【问题描述】：

我正在尝试使用以下代码禁用 Safari 9 (OS X El Capitan) 上的 X 滚动，但它不起作用，它适用于 Firefox 和 Chrome，但 Safari 仍在滚动，任何人都可以帮助我吗？

我的 CSS 代码：

html, body
{
    overflow-x: hidden
}

我的 JavaScript 代码：

function disableX(e)
{
    if(scrollX > 0)
    {
        e.preventDefault();
        e.stopPropagation();
    }
}
addEventListener("scroll", disableX);

【问题讨论】：

标签： javascript css macos safari

【解决方案1】：

尝试添加 !important，否则打开 chrome 开发工具查看它使用的属性。

【讨论】：

【解决方案2】：

添加位置：相对；到身体

body {
  position:relative;
  overflow-x:hidden;
}

More infos on: Safari Oveflow Hidden Problem

【讨论】：

【解决方案3】：

但是overflow-x: hidden;on body和html真的没有那么大的意义，也就是说，如果有其他东西可以看到，用户应该能够看到它，并且我想这就是 Safari 阻止它的原因。

也许您应该将该设置应用于 DOM 层次结构中更靠下的某个元素。

---> 编辑部分：我的意思是：从body 和html 中删除这些规则，直接在<body> 中放入一个DIV（即所有内容的包装器）并应用您的溢出规则到那个 DIV。

【讨论】：

我需要它到正文，因为在正文中我有 5 个宽度为 100vw 的部分，我需要使用 JavaScript 而不是滚动条来滚动这些部分，我需要禁用默认的 X 滚动。
嗯，我的意思是这 5 个部分的包装。在这种情况下，包装器将具有 100% 的高度，即正文中不会有任何可滚动的内容。滚动必须发生在该包装内，您可以使用 ``overflow-x: hidden;` 阻止它，Javascript scolling 必须在该包装内发生......