我使用了::-webkit-scrollbar
& - ms-overflow-style: none
隐藏滚动条。它与Chrome& IE但不在Firefox 。使用CSS或Jquery的任何解决方案?请参阅下面添加的代码段:
$(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 {
width: 300px;
height: 300px;
position: relative;
}
.box {
width: 100%;
max-height: 300px;
background: #eee;
overflow-y: scroll;
-ms-overflow-style: none;
}
.box::-webkit-scrollbar {
display: none;
}
.box::-moz-scrollbar {
overflow-y: hidden;
}
#hoverscroll {
width: 100%;
height: 40px;
background-color: gray;
position: absolute;
bottom: 0;
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 :(得分:1)
没有跨浏览器解决方案。将其包裹在较小的标签中,然后添加&#34; overflow:hidden&#34;对于那个标签。