css - Antiscroll native 滚动条在 IE 和 Firefox 中可见

Question

我正在使用反滚动框架在我的网站上创建一个类似 Apple 的滚动条。有关该框架的更多信息可在此处找到:https://github.com/LearnBoost/antiscroll

我已经按照这些步骤查看了文件 index.html 中的示例代码。我试图重建这个例子，它在 Safari 和 Chrome 浏览器中工作。但是，在 IE 和 Firefox 上， native 滚动条仍然在类似 Apple 的滚动条下方可见:(

我不知道是什么原因造成的。我在这里创建了一个 JSFiddle:

http://jsfiddle.net/BCLE6/2/

<div class="antiscroll-wrap">
<div class="antiscroll-inner huurvoorwaarden-wrapper">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</div>

CSS:

.antiscroll-inner {
    width: 100px;
    height: 100px;
    background-color: #BBB;
}

而我只有一行 JS:

$('.antiscroll-wrap').antiscroll();

在 fiddle 中，我导入了所需的库(jQuery、antiscroll.js、antiscroll.css 和 jquery.mousewheel.js)。

如果你在 Firefox 或 IE 中打开 fiddle，你可以清楚地看到问题所在。有人可以向我解释为什么会发生这种情况以及我可以做些什么来解决它吗？

谢谢!

Answer 1

我建议增加你的内部宽度，并在你的包装上 overflow hidden :

.antiscroll-inner {
  background-color: #bbb;
  height: 100px;
  overflow-x: hidden;
  width: 120px; /** Make 20px larger to extend browser scrollbar outside of wrapper **/
 }

.antiscroll-wrap {
  overflow: hidden; /** Hide overflow **/
  width: 100px; /** Size to what you want, but 20px smaller than inner **/
}