1

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

我已经按照这些步骤查看了示例代码，即文件 index.html。我试图重建这个例子，它可以在 Safari 和 Chrome 浏览器中运行。然而，在 IE 和 Firefox 上，本机滚动条在类似 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();

在小提琴中，我已经导入了所需的库（jQuery、antiscroll.js、antiscroll.css 和 jquery.mousewheel.js）。

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

谢谢！

4

2 回答 2

1

我建议增加你的内部宽度，并在你的包装器上隐藏溢出：

.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 **/
}
于 2013-08-14T20:43:41.880 回答
0

您只需要在“antiscroll-wrap”和“antiscroll-inner” div 之间添加另一个 div，用于覆盖内部 div 的滚动条。这是他们示例的标记结构：

<div class="box-wrap antiscroll-wrap">
   <div class="box">
      <div class="antiscroll-inner">
         ... 
      </div>
   </div>
</div>

你只是错过了他们归类为“盒子”的 div 。

于 2014-06-05T18:30:00.583 回答