我已经使用::-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 /边缘 –