js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)
本文實(shí)例為大家分享了js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
項(xiàng)目中碰到一個(gè)場(chǎng)景就是當(dāng)鼠標(biāo)滑倒某個(gè)div的時(shí)候,滑動(dòng)鼠標(biāo)頁(yè)面不再滾動(dòng)。
這里主要是當(dāng)鼠標(biāo)滑動(dòng)到該div時(shí),監(jiān)聽滾輪事件并通過(guò)preventDefault()事件來(lái)阻止?jié)L動(dòng)事件,以下是例子
eg:

#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
<div id="wrap"> 鼠標(biāo)移動(dòng)進(jìn)入該區(qū)域,頁(yè)面禁止?jié)L動(dòng) </div>
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test<br/>";
document.body.appendChild(x);
}
function $(x) {
return document.getElementById(x);
};
$("wrap").onmousewheel = function scrollWheel(e) {
var sl;
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
event.returnValue = false;
} else {
e.preventDefault();
};
};
if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
//firefox支持onmousewheel
addEventListener('DOMMouseScroll',
function (e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == 'BODY') break;
obj = obj.parentNode;
};
if (onmousewheel) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false; //禁止頁(yè)面滾動(dòng)
if (typeof obj.onmousewheel != 'function') {
//將onmousewheel轉(zhuǎn)換成function
eval('window._tmpFun = function(event){' + onmousewheel + '}');
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
};
// 不直接執(zhí)行是因?yàn)槿鬿nmousewheel(e)運(yùn)行時(shí)間較長(zhǎng)的話,會(huì)導(dǎo)致鎖定滾動(dòng)失效,使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
},
1);
};
},
false);
};
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫輪播效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12
Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
一般上傳文件時(shí)都需要進(jìn)度條,本篇文章主要介紹了Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼,有興趣的可以了解一下。2017-03-03
JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡(jiǎn)單示例
這篇文章主要介紹了JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間,涉及javascript基于定時(shí)器動(dòng)態(tài)操作Date對(duì)象相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能
這篇文章主要介紹了uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11

