【问题标题】:horizontal scroll breaks with overflow-x:hidden in safari and firefox水平滚动中断时溢出-x:在 safari 和 firefox 中隐藏
【发布时间】:2013-01-15 06:03:30
【问题描述】:

我在一个 wordpress 网站上进行了水平滚动,该网站在所有计算机上都可以在 chrome 上运行,但在 safari 和 firefox 上的某些计算机上却不行。

我的代码是:

html {
    height:100%;
    overflow-x:hidden;

}
body {
    width:3080px;
    overflow-y:hidden;
}

当我删除 overflow-x:hidden;水平滚动有效,但您可以看到滚动条。 这是网站的链接http://happybirthday.irinanisimova.com/photography/

如何隐藏滚动条?你也知道为什么这在 safari 和 firefox 中的某些计算机上有效,但不是全部?

谢谢!

【问题讨论】:

  • 为什么它可以在某些 safari 和 ff 中工作,但在其他地方不能工作,这可能是版本差异。
  • 它在 Chrome 24 和 Firefox 18 中运行良好。

标签: css scroll overflow horizontal-scrolling


【解决方案1】:

当我想更改默认滚动条时,我通常会创建一个容器 div,然后在其上而不是在正文上设置我想要的溢出。尝试将溢出切换到宽度和高度为 100% 的容器 div,并删除 body 标记上的宽度和溢出。

http://jsfiddle.net/7kd8V/21/

html {
overflow:hidden;
}
#container {
width:100%;
overflow:auto;
white-space: nowrap;
}
img {
display:inline-block;
}

    <div id="container">
        put images in here
    </div>

【讨论】:

  • 更接近原始但更“hackish”的 imo。但有效。 jsfiddle.net/7kd8V/27
  • 感谢这在我所做的测试中起作用,但不是网站本身。一定有一些代码阻止了它。我将开始调试。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-10
  • 1970-01-01
  • 1970-01-01
  • 2012-10-28
  • 1970-01-01
  • 1970-01-01
  • 2021-06-30
相关资源
最近更新 更多