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)聽(tīng)滾輪事件并通過(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-09javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
一般上傳文件時(shí)都需要進(jìn)度條,本篇文章主要介紹了Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼,有興趣的可以了解一下。2017-03-03JS使用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-08uni-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