html - CSS 下拉菜单在 Chrome 中在按钮单击和悬停时向下滚动页面

Question

咆哮

所以我花了一个多小时在纯 css 下拉和关闭菜单上，我认为它非常漂亮，然后只有在完成所有样式并使其在我的网站上看起来不错之后，我才决定在 Chrome 中检查它。糟糕。

问题

为什么我的纯 css 下拉菜单会让 Google 的 Chrome 在点击按钮时向下滚动页面？有没有一种简单的方法可以使其同时兼容 FF 和 Chrome？

提示

这与菜单是 position: fixed header 有关，但我不知道为什么 Firefox 的行为与我想要的一样，而 Chrome 拉动 IE。

例子

这是 jsfiddle 上的精简示例

http://jsfiddle.net/Hastig/a77ewh89/

• 在 chrome 和 firefox 中查看差异
• 单击 menu1、menu2 或 menu3 以激活下拉菜单
• 不包括菜单关闭按钮代码，因为它没有区别

线索

• 这与 Chrome 处理位置有关:已修复；
• 使用边距或高度 bug chrome 的幻灯片效果的变化方式相同。
• 在完整的站点就绪版本中，我有一个点击关闭按钮，它在 FF 和 Chrome 中都可以完美运行，它可以向上滚动菜单。在 Chrome 中单击关闭按钮时，滚动错误不会反转页面滚动。
• 在完整版中，我还在按钮上添加了悬停样式。打开下拉菜单后，在 Chrome 中，将鼠标悬停在这些按钮上也会使页面向下滚动。
• 一旦到达页面底部，滚动问题就结束了。

代码

CSS

.header {
    position: fixed;    top: 20px;
    background-color: rgba(0,0,0,0.8);
}

.button {
    color: white;
    display: inline-block;
}

.menu {
    width: 500px; height: 0px;
    overflow: hidden;
    transition: all 1s;
    color: white;
}

#menu1:target, #menu2:target, #menu3:target {
    height: 300px;
}

.content {
    margin: 80px 0px 0px 0px;
    width: 500px;
    background-color: red;
}

.filler-divs {
    font-size: 40px;
    color: white;
}

html

<div class="header">
    <a class="button" id="button1" href="#menu1">Menu 1</a>
    <a class="button" id="button1" href="#menu2">Menu 2</a>
    <a class="button" id="button1" href="#menu3">Menu 3</a>

    <div class="menu" id="menu1">menu 1</div>
    <div class="menu" id="menu2">menu 2</div>
    <div class="menu" id="menu3">menu 3</div>
</div><!-- end header -->

<div class="content">
    <div class="filler-divs">filler filler filler filler filler filler filler filler filler filler</div>
    <div class="filler-divs">filler filler filler filler filler filler filler filler filler filler</div>
<!-- add lots more of these divs to fill the page with text so you can see it scroll down - scrolling stops at page bottom -->  
</div><!-- end content -->

Answer 1

没有必要放弃纯 CSS 方法。请参阅下面的示例。解决方案是将您的所有内容放在一个容器元素中，该容器元素复制您的 body 元素，但 Chrome 不会滚动浏览该元素以尝试显示菜单元素。

新版本:http://jsfiddle.net/scarl3tt/dm89g0m5/

div.fake-body 必须包装您的 .content 类:

.fake-body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    overflow-y: auto;
}

...并且您的 .header 需要在 DOM 中移动到此之后或用 z-index: 1 标记以确保它显示在假的上方 body 并能够与之互动。