IE 和 Chrome 滚动条干扰菜单导航答案

【问题标题】：IE & Chrome scroll bar interferring with menu navigationIE 和 Chrome 滚动条干扰菜单导航
【发布时间】：2014-01-29 08:09:05
【问题描述】：

我已经写了一个简单的 HTML CSS 导航菜单位置：固定为一个站点。菜单下拉菜单设置为overflow-y:scroll，子uls在父母旁边（见http://www.goodskiguide.com/gsgs-complete-a-z-resorts-guide/）

滚动条不会干扰 firefox，因为它仅在您实际滚动时出现，但在 Chrome 和 IE 中它始终存在，因此当您将光标导航到右侧以选择子 li 时，悬停属性会丢失。

谁能建议我如何解决这个问题。如果修复 enplyos jQuery，那么请您提供详细信息，因为我对 jQ 的了解还不完全。

谢谢

【问题讨论】：

我在 Chrome 上没有问题...
您的意思是度假村搜索？对我来说，在 Firefox（Win 7，FF 29 nightly）中，滚动条总是在那里。在试图到达子菜单时将鼠标悬停在滚动条上会使它全部消失。
我不确定您是在我删除搜索之前还是之后查看，但它现在位于 www.goodskiguide.com/testpost-2
感谢您让我知道它适用于您的 chrome 版本，但对我来说，不。也不是 IE。不能拥有仅在某些浏览器上运行的网站。不幸的是，我们不得不迎合IE的困难。 Olly-我在 Firefox 上发现，如果您停止滚动，暂停一秒然后滚动条消失，然后您可以轻松移动。但是对于其他浏览器，滚动条始终存在。

【解决方案1】：

我想出了一个简单的解决方案。解决方案基本上是将通常位于滚动条另一侧的容器的 padding-left 设置为接近滚动条宽度的值，如下所示

ul{padding-left:30px;}  //or whatever the width of the scroll bar is

因此应该有效地创建一个覆盖滚动条的透明左端，以便当鼠标悬停在滚动条上时，它实际上是悬停在滚动条另一侧的内容上，因此它仍然悬停在上面。这是显示示例的fiddle，它在 chrome、IE 和 firefox 中对我有用

【讨论】：