Javascript 如何使鼠标滚动不作用于特定的文章？

作为示例，我将一个HTML站点上载到测试域。地址如下:

全屏站点，由三个模块组成，用于演示。您可以使用鼠标滚轮或在触摸设备上滑动鼠标滚轮

JS代码对此负责：

/--------------变量----------------//
var ticking=false；
var isFirefox=（/Firefox/i.test（navigator.userAgent））；
变量isIe=（/MSIE/i.test（navigator.userAgent））| |（/Trident.*rv \：11\/i.test（navigator.userAgent））；
var滚动灵敏度设置=30//增加/减少此数字可更改触摸板手势的灵敏度（向上=不太敏感；向下=更敏感）
var SliderationSetting=600//幻灯片“锁定”的时间量
var currentSlideEnumber=0；
var TotalSlideEnumber=$（“.background”）.length；
//------确定增量/滚动方向----------------//
函数视差克罗尔（evt）{
如果（iFirefox）{
//设置Firefox的增量
δ=evt.detail*（-120）；
}否则如果（isIe）{
//为IE设置增量
delta=-evt.deltaY；
}否则{
//为所有其他浏览器设置增量
delta=电动轮delta；
}
如果（滴答声！=真）{
if（增量=滚动灵敏度设置）{
//上卷
滴答声=真；
如果（CurrentSlideEnumber！==0）{
当前滑动枚举器--；
}
上一项（）；
slideDurationTimeout（slideDurationSetting）；
}
}
}
//------将超时设置为临时“锁定”幻灯片----------------//
函数slideDurationTimeout（slideDuration）{
setTimeout（函数（）{
滴答声=假；
}，滑动教育）；
}
//-----------添加事件侦听器----------------//
var mouseweelevent=isFirefox？“DOMMouseScroll”：“轮子”；
window.addEventListener（mouseweelEvent，uu.throttle（视差croll，60），false）；
//------滑动运动----------------//
函数nextItem（）{
var$previousSlide=$（“.background”）.eq（currentSlideNumber-1）；
$previousSlide.removeClass（“向上滚动”）.addClass（“向下滚动”）；
}
函数previousItem（）{
var$currentlide=$（“.background”）.eq（currentlidenumber）；
$currentSlide.removeClass（“向下滚动”）.addClass（“向上滚动”）；
}
//滑动模式Rodichev Vladimir
//至少100像素是一次刷卡
//您可以使用与屏幕大小相关的值：window.innerWidth*.1
常数偏移=100；
让我们走，让我们走
window.addEventListener（'touchstart'，e=>{
const firstTouch=getTouch（e）；
xDown=firstTouch.clientX；
yDown=firstTouch.clientY；
});
window.addEventListener（'touchend'，e=>{
如果（！yDown）{
返回；
}
常数{
顾客：是的
}=getTouch（e）；
const yDiff=yDown-yUp；
const yDiffAbs=Math.abs（yDown-yUp）；
//至少是一次重击
if（数学最大值（yDiffAbs）<偏移量）{
返回；
}
如果（yDiff>0）{
//上卷
滴答声=真；
如果（CurrentSlideEnumber！==0）{
当前滑动枚举器--；
}
上一项（）；
slideDurationTimeout（slideDurationSetting）；
}否则{
//下卷轴
滴答声=真；
如果（currentSlideNumber！==totalSlideNumber-1）{
currentSlideNumber++；
nextItem（）；
}
slideDurationTimeout（slideDurationSetting）；
}
});
函数getTouch（e）{
返回e.changedTouches[0]
}

我们进入最后一个模块，我在其中插入了测试信息，并回顾了游戏《猎头》，同样是为了演示，这些信息也将通过鼠标滚轮水平滚动

负责水平滚动块的代码“

功能水平滚动（e）{
var=这个；
that.element宽度=that.element宽度| | getColumnWidth（that）；
var scrollDirection=（东车轮三角洲）？（0-东车轮三角洲）：（东细节），
actualColumn=Math.round（that.scrollLeft/that.elementWidth），
targetColumn=（scrollDirection>0）？actualColumn+1:actualColumn-1；
if（scrollElementToColumn（that，targetColumn））e.preventDefault（）；
}
函数getColumnWidth（即）{
var style=window.getComputedStyle（即，null）；
var columnWidth=parseFloat（style.columnWidth | | style.MozColumnWidth | | style.webkitColumnWidth）；
var columnGap=parseFloat（style.columnGap | | | style.MozColumnGap | | style.webkitColumnGap）；
返回列宽度+列间距；
}
函数scrollElementToColumn（即columnIndex）{
that.element宽度=that.element宽度| | getColumnWidth（that）；
var expectedplacetoscoll=Math.round（columnIndex*that.elementWidth），
distanceToScroll=Math.abs（that.scrollLeft-expectedPlaceToScroll），
defaultScrollShift=30，
savedScrollLeft=that.scrollLeft，
scrollShift=（defaultScrollShiftexpectedPlaceToScroll）{
that.scrollLeft=that.scrollLeft-scrollShift；
}
if（that.scrollLeft！==expectedPlaceToScroll&&savedScrollLeft！==that.scrollLeft）{
that.actuallyMoving=setTimeout（function（）{scrollElementToColumn（that，columnIndex）}，10）；
返回true；
}
如果（that.actuallyMoving）clearTimeout（that.actuallyMoving）；
返回false；
}
document.addEventListener（“DOMContentLoaded”，function（））{
var elems=document.getElementsByClassName（'mario'）；
var i；
对于（i=0，nb=elems.length；i

内容滚动的文章

// ------------- VARIABLES ------------- //
var isHorizontal = false;
var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
var totalSlideNumber = $(".background").length;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //
function parallaxScroll(evt) {
  if(isHorisontal) {
    isHorisontal = false;
    return;
  }
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);

// ------------- SLIDE MOTION ------------- //
function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}


// SWIPE MODE Rodichev Vladimir
// at least 100 px are a swipe
// you can use the value relative to screen size: window.innerWidth * .1
const offset = 100;
let xDown, yDown

window.addEventListener('touchstart', e => {
  const firstTouch = getTouch(e);

  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
});

window.addEventListener('touchend', e => {
  if (!yDown) {
    return;
  }

  const {
    clientY: yUp
  } = getTouch(e);
  const yDiff = yDown - yUp;
  const yDiffAbs = Math.abs(yDown - yUp);

  // at least <offset> are a swipe
  if (Math.max(yDiffAbs) < offset ) {
    return;
  }


    if ( yDiff > 0 ) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    } else {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
});

function getTouch (e) {
  return e.changedTouches[0]
}

function horizontalScroll(e){
  isHorisontal = true;
  var that = this;
  that.elementWidth = that.elementWidth || getColumnWidth(that);

  var scrollDirection = ( e.wheelDeltaY )? (0 - e.wheelDeltaY) : ( e.detail),
      actualColumn = Math.round( that.scrollLeft / that.elementWidth),
      targetColumn = (scrollDirection > 0 )? actualColumn + 1 : actualColumn - 1;

  if(scrollElementToColumn( that, targetColumn )) { 
    e.preventDefault(); 
  } else {
    isHorisontal = false;
  }

}

function getColumnWidth(that){
  var style = window.getComputedStyle(that, null);
  var columnWidth = parseFloat( style.columnWidth || style.MozColumnWidth || style.webkitColumnWidth );
  var columnGap = parseFloat( style.columnGap || style.MozColumnGap || style.webkitColumnGap );
  return columnWidth + columnGap;
}

function scrollElementToColumn(that, columnIndex){
  that.elementWidth = that.elementWidth || getColumnWidth(that);

  var expectedPlaceToScroll = Math.round(columnIndex * that.elementWidth),
      distanceToScroll = Math.abs( that.scrollLeft - expectedPlaceToScroll ),
      defaultScrollShift = 30,
      savedScrollLeft = that.scrollLeft,
      scrollShift = ( defaultScrollShift < distanceToScroll )? defaultScrollShift : distanceToScroll ;

  if(that.scrollLeft < expectedPlaceToScroll){
    that.scrollLeft = that.scrollLeft + scrollShift;
  }else if(that.scrollLeft > expectedPlaceToScroll){
    that.scrollLeft = that.scrollLeft - scrollShift;
  }

  if(that.scrollLeft !== expectedPlaceToScroll && savedScrollLeft !== that.scrollLeft ){
    that.actuallyMoving = setTimeout( function(){scrollElementToColumn( that, columnIndex )}, 10);
    return true;
  }

  if( that.actuallyMoving ) clearTimeout(that.actuallyMoving);
  return false;
}


document.addEventListener("DOMContentLoaded", function() {
  var elems = document.getElementsByClassName('mario');
  var i;
  for(i = 0, nb = elems.length; i < nb; i++){
    if (elems[i].addEventListener) {
      elems[i].addEventListener("mousewheel", horizontalScroll, false);// IE9, Chrome, Safari, Opera
      elems[i].addEventListener("DOMMouseScroll", horizontalScroll, false);// Firefox
    } else elems[i].attachEvent("onmousewheel", horizontalScroll);// IE 6/7/8
  }

  window.addEventListener('resize', function(e){
    console.log('resizing, i saw you !');
    for(i = 0, nb = elems.length; i < nb; i++){
      elems[i].elementWidth = getColumnWidth(elems[i]);
    }
  });
});

var isHorizontal = false; //Global variable

function parallaxScroll(evt) {
  if(isHorizontal) {
    isHorizontal = false;
    return;
  }

function horizontalScroll(e){
  isHorizontal = true;    

  // skipped

  if(scrollElementToColumn( that, targetColumn )) { 
    e.preventDefault(); 
  } else {
    isHorizontal = false;
  }