Question

我正在使用antiscroll框架在我的网站上创建类似Apple的滚动条。有关该框架的更多信息，请访问：https://github.com/LearnBoost/antiscroll

我已按照步骤操作并查看示例代码，即index.html文件。我尝试重新构建示例，它可以在Safari和Chrome浏览器中使用。但是，在IE和Firefox上，原生滚动条仍然可以在类似Apple的滚动条下方看到：（

我不知道是什么原因引起的。我在这里创建了一个JSFiddle：

<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中打开小提琴，您可以清楚地看到问题。有人可以向我解释为什么会发生这种情况以及我可以做些什么来解决它？

谢谢！

Answer 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 **/
}

Answer 2

你只需要在＆＃34; antiscroll-wrap＆＃34;之间添加另一个div。和＆＃34; antiscroll-inner＆＃34; div将用于覆盖内部div的滚动条。这是标记结构的形式：

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

你只是错过了他们被归类为＆＃34; box＆＃34;的那个div。

在IE和Firefox中可见的Antiscroll原生滚动条

2 个答案: