隐藏滚动条在 Mozilla Firefox 中不起作用

debugcn 发表于 Dev

毗湿奴

我用::-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>

奥特瓦日尼

没有跨浏览器的解决方案。将其包裹在一个较小的标签中，然后为该标签添加“溢出：隐藏”。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。