2017-06-24 95 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