屏幕外绝对定位的 Div 导致水平滚动

Question

编辑/更新：2019 年 6 月 7 日

我已经确定这是 Safari 中的一个错误，因为 CSS 在所有其他浏览器中都可以完美运行。对于发现这一点的任何人，如果您正在创建一个滑动菜单（从屏幕上滑到视口右侧），从 Safari 12.1.1 开始，将溢出-x 添加到 body 标记将not工作（它确实工作）在 Chrome、Firefox 等上） - 这意味着当您的菜单 div 位于屏幕右侧时，用户可以水平滚动并查看菜单。

我发现一种（某种）解决方法是为菜单潜水的父容器提供一个位置：固定属性 - 这显然仅在您打算修复标题时才有效。

原始问题

我正在构建一个简单的标题，其中的菜单在按下菜单按钮时从右向左滑动。但是，当我将菜单 div 置于屏幕外（左：100%）时，在 Safari 上，我可以水平向右滚动以查看菜单 div。 （没有出现滚动条，但我可以通过鼠标向右滚动）

如果我在标题上设置

overflow-x:hidden

，那么它会隐藏屏幕外的 div，但如果设置

left:0

也不会显示它（即

overflow-x

似乎隐藏了 x 和 y 方向）。

更令人困惑的是，如果我将标题更改为

position:fixed

，那么它就可以工作，并且你无法向右滚动查看屏幕外菜单 div。

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  padding: 10px;
  background: #CCC;
  position: relative;
}

.slideMenu {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%;
  padding: 10px;
  background: #666;
}

<div class="header">
  Header ---> Scroll to Right
  <div class="slideMenu">
    Menu is visible offscreen- :(
  </div>
</div>

这是问题的示例：https://jsfiddle.net/ar7qyfgt/

Answer 1

我在 Safari 中遇到了类似的问题。似乎有效的解决方案是将

overflow-x: hidden;

应用于

html

AND

body

标签。

添加到正文解决了除 Safari 之外的所有浏览器中的问题。将其应用于 Safari 似乎可以解决问题，同时仍然支持其他浏览器。

Answer 2

当我将 div 设置为位置：absolute 和 right：-15rem 时，我在 Safari（版本 12.1.1）中遇到同样的问题；

为了解决这个问题，我添加了一个包含其中的所有元素并具有如下 CSS：

.wrapper {
  position: relative;
  overflow-x: hidden;
}

希望这有帮助。

Answer 3

您当前所拥有的功能，您只需在

overflow-x:hidden

上设置

body

而不是

.header

Answer 4

你想实现什么目标？这？：

JSFiddle：

(https://jsfiddle.net/pzeqfb51/)

HTML：

<div class="header">
  Header ---> Scroll to Right
  <div class="slideMenu">
    Menu is visible offscreen- :(
  </div>
</div>

CSS：

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  padding: 10px;
  background: #CCC;
  position: relative;
}

.slideMenu {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%;
  padding: 10px;
  background: #666;
}

div {
  display:inline-block;
}

Answer 5

对我有用的是将

overflow-x: clip

添加到

<header>

元素。