我已經使用::-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>
注意:':: - webkit-scrollbar適用於基於webkit的borwsers(webkit前綴是線索)'-ms-overflow-style:none'適用於基於微軟的瀏覽器(ms前綴是線索)...當然firefox不明白css寫的鉻或IE /邊緣 –