javascript - 内部 div 滚动不适用于 firefox 浏览器

标签 javascript jquery html css

内部 div 滚动不适用于 mozilla firefox 浏览器。

它在 chrome 中运行流畅。

firefox scroll 有破解方法吗?这是 fiddle :http://jsfiddle.net/t6jd25x9/2/

body {
  font-size: 14px;
  background: #fff;
  color: #000;
}
#second-fold {
  height: 300px;
  overflow-y: scroll;
  position: fixed;
  top: 50px;
  left: 150px;
  width: 100%
}
#second-fold div {
  width: 30%;
}
<section id="first-fold">
  <h1>Fold 1</h1>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>

</section>
<section id="second-fold">
  <div>
    <h1>Fold 2</h1>
    <h4>Slide 1</h4>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <h4>Slide 2</h4>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <h4>Slide 3</h4>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <h4>Slide 4</h4>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
  </div>

</section>
<section id="third-fold">
  <h1>Fold 3</h1>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</section>

最佳答案

如果您希望第二个折叠的滚动条可见,那么只需在您发布的特定 jsfiddle 示例中将宽度设置为小于 70%。除此之外一切正常

关于javascript - 内部 div 滚动不适用于 firefox 浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34041159/

相关文章:

java - 如何在ajax中发送多部分/表单数据请求

javascript - 使用 Reactjs 清除输入字段?

javascript - Foundation.MediaQuery.current 在一个循环中(第一次迭代总是什么都不显示,下一次总是正确的)

javascript - Angular 1 : referencing controller object inside template

Javascript > HTML 输出纯文本

javascript - Jquery 克隆元素样式

php - 调用JS函数时销毁 session 变量

javascript - 如何将 dropbox 放入 Iframe 中?

javascript - 获取另一个元素后面的元素

javascript - 异步加载特定 CSS,并在加载时删除等待消息