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

Question

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

我已经确定这是Safari中的一个Bug，因为CSS在其他所有浏览器中都完美运行。对于任何人来说，如果你正在创建一个滑动菜单（从视口向右滑出），截止到Safari 12.1.1，在body标签中添加overflow-x将不起作用（Chrome、Firefox等中有效）-这意味着当您的菜单div位置超出屏幕右侧时，用户可以水平滚动并查看菜单。

我发现一种（有点）解决方法是给菜单dive的父容器添加position:fixed属性——这显然只适用于您打算固定标题的情况。

原始问题

我正在构建一个简单的头部和一个菜单按钮，当菜单按钮被按下时，菜单从右向左滑动显示。但是，当我把菜单div位置设置在屏幕外面时（left:100%），在Safari中，我可以横向滚动到右边以查看菜单div。（没有滚动条出现，但我可以通过鼠标向右滚动）

如果我在header上设置overflow-x:hidden，那么它会隐藏屏幕外的div，但是如果你设置left:0，它也不会显示（即overflow-x似乎隐藏了x和y方向）。

更令人困惑的是，如果我将header更改为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/

- JS77

---

它可以工作，只需将“left”设置为0而不是0％。请参见此处-https://jsfiddle.net/dv8m71z4/6/ - Christopher Bennett

@ChristopherBennett - 是的，我知道。问题是关于当菜单div被移出屏幕时（即菜单处于关闭状态）的情况。在Safari上，它仍然允许您水平滚动以查看“屏幕外”的项目。我已经更新了我的原始问题，因为我认为这是Safari中的一个错误。 - JS77

Answer 1

我遇到了Safari类似的问题。解决方法似乎是对html和body标签应用overflow-x: hidden;。将其添加到中解决了除Safari之外所有浏览器中的问题。在两者上应用它似乎可以解决Safari的问题，同时仍支持其他浏览器。

- Jake Hudson

Answer 2

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

为了解决这个问题，我添加了一个包含所有元素的

，并使用以下CSS：

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

希望这有帮助。

- creswei

Answer 3

你目前的代码可用，只需要在 body 上设置 overflow-x:hidden，而不是在 .header 上设置。

- JayB

---

这段代码在jsfiddle上可以运行，但是在我的HTML文件中同样的代码在Safari浏览器上无法运行！以下是代码：https://pastebin.com/zz7c4Ehd - JS77

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;
}

- Krøsh