快捷導(dǎo)航

js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)

更新時(shí)間：2020年09月17日 10:32:40 作者：劉老實(shí)1528

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: