2017-06-24 96 views
1

我已经使用::-webkit-scrollbar & - ms-overflow-style: none隐藏滚动条。它与Chrome & IE工作正常,但不在Firefox中。任何使用CSS或Jquery的解决方案?请参阅下面的添加片段:隐藏滚动条不能在Mozilla Firefox中工作

$(document).ready(function() { 
 
    var count; 
 
    var interval; 
 

 
    $("#hoverscroll").on('mouseover', function() { 
 
     var div = $('.box'); 
 

 
     interval = setInterval(function(){ 
 
      count = count || 1; 
 
      var pos = div.scrollTop(); 
 
      div.scrollTop(pos + count); 
 
     }, 10); 
 
    }).click(function() { 
 
     if (count < 6) { 
 
      count = count+1; 
 
     } 
 
    }).on('mouseout', function() { 
 
     // Uncomment this line if you want to reset the speed on out 
 
     // count = 0; 
 
     clearInterval(interval); 
 
    }); 
 
}) 
 
;
.con { 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t position: relative; 
 
} 
 
.box { 
 
\t width: 100%; 
 
\t max-height: 300px; 
 
\t background: #eee; 
 
\t overflow-y: scroll; 
 
\t -ms-overflow-style: none; 
 
} 
 
.box::-webkit-scrollbar { 
 
display: none; 
 
} 
 
.box::-moz-scrollbar { 
 
overflow-y: hidden; 
 
} 
 
#hoverscroll { 
 
\t width: 100%; 
 
\t height: 40px; 
 
\t background-color: gray; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t opacity: 0.5; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> 
 
<div class="con"> 
 
    <div class="box"> content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    content<br> 
 
    </div> 
 
    <div id="hoverscroll"></div> 
 
</div>

+0

注意:':: - webkit-scrollbar适用于基于webkit的borwsers(webkit前缀是线索)'-ms-overflow-style:none'适用于基于微软的浏览器(ms前缀是线索)...当然firefox不明白css写的铬或IE /边缘 –

回答

1

没有跨浏览器的解决方案。将它包装在一个较小的标签中,然后为该标签添加“overflow:hidden”。

+0

溢出:隐藏不适合我的合适的解决方案..因为它包含垂直下拉菜单。检查此链接中的类别部分: https://aawkitchens.com/ – Vishnu

+0

你不能让jquery/css走你自己的路。而是你必须接受他们提供的东西。就像我说的,没有针对您的问题的跨浏览器解决方案。 – Otvazhnii

+0

看看这个链接:https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-和safari/ – Otvazhnii