vue.js-div滚动条隐藏但有滚动效果的实现方法-创新互联
组件被包在一个高度固定的div

mounted () {
var boDiv = document.getElementById(this.id);
if(boDiv == undefined){
return;
}
var isFirefox=navigator.userAgent.indexOf("Firefox")
if(isFirefox>0){
boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
var evt = window.event || arguments[0]
if (evt.detail <= -3) {
boDiv.scrollTop=boDiv.scrollTop-10
} else if (evt.detail >= 3) {
boDiv.scrollTop=boDiv.scrollTop+10
}
evt.stopPropagation();
evt.preventDefault();
}, false);
}else{
boDiv.addEventListener("mousewheel",function(event) {
var evt = window.event || arguments[0]
evt.returnValue = false //屏蔽body滚动事件
if (evt.wheelDelta <= -120) {
boDiv.scrollTop=boDiv.scrollTop+40
} else if (evt.wheelDelta >= 120) {
boDiv.scrollTop=boDiv.scrollTop-40
}
})
}
}
}
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:vue.js-div滚动条隐藏但有滚动效果的实现方法-创新互联
网页URL:http://www.jxjierui.cn/article/ddejje.html


咨询
建站咨询
