Как сделать чтобы прокрутка мыши не действовала на определенном article?

167
03 ноября 2019, 02:30

кому-то вечера или ночи, все вам ребята! Я постараюсь объяснить, чтобы вы меня поняли. Итак в качестве образца я залил на тестовый домен html сайт. Вот его адрес, откройте его, пожалуйста, для полноты картины: http://test.ooo-pnu.ru/

Сайт на полный экран, состоит из трёх блоков для демонстрации. Прокручивать их можно колесиком мыши или свайпом на сенсорных устройствах.

за это отвечает код на js:

// ------------- VARIABLES ------------- //
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 (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]
}

Спускаемся к последнему блоку, в нём я вставил тестовую информацию с обзором игры Headhunter, тоже для демонстрации, информация скролится по-горизонтали колесиком мышки тоже.

Код отвечающий за блок со скролингом по-горизонтали на js:

function horizontalScroll(e){
  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();
}
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]);
    }
  });
});

article, в котором скроллится контент по-горизонтали:

<article class="mario">

Вопрос собственно такой: Как сделать так, чтобы при прокрутки колесика мыши на контенте в самом последнем блоке не срабатывало одновременно и скроллинг экрана? При этом нужно решение такое, чтобы можно было экран мотать тоже. Пока у меня идея такая, чтобы на article при наводке курсора не работал скроллинг экрана, работал только скроллинг контента, отводим курсор от article - тогда работает скроллинг экранов вновь. Помогите, пожалуйста реализовать идею. Если есть альтернативные варианты, пожалуйста, предложите. Буду рад.

Спасибо вам за внимание, всем добра, долголетия и счастья.

Answer 1

Ваш вопрос на английском stackoverflow был переведен не совсем точно, отвечу здесь. Для тестового сайта делаем такие вставки кода:

index.js:

var isHorizontal = false; //Global variable
function parallaxScroll(evt) {
  if(isHorizontal) {
    isHorizontal = false;
    return;
  }

horisontalscroll.js:

function horizontalScroll(e){
  isHorizontal = true;    
  // skipped
  if(scrollElementToColumn( that, targetColumn )) { 
    e.preventDefault(); 
  } else {
    isHorizontal = false;
  }

Это работает по той причине, что событие прокрутки передается сначала в horisontalScroll обработчик, а затем в parallaxScroll

Answer 2

Просто задавай функцию false когда mouse на фокусе определенного частя . Используй window.addEventListener('scroll') и напиши вес код на js.

READ ALSO
MySQL вывод значений

MySQL вывод значений

Как вывести данные, где col1 < col2

169
Ссылка на источник через html css

Ссылка на источник через html css

Каким образом можно реализовать такую вещь: при копирование ссылки с какого-то сайта и вставки в соц сеть, чтобы отображался блок с минимальной...

197
Что за плагин, позволяющий, к примеру, в HTML задавать структуру элемента в одну строку?

Что за плагин, позволяющий, к примеру, в HTML задавать структуру элемента в одну строку?

Вместо того, чтобы прописывать вручную неотсортированный список с шестью элементами и классом flex-elem в каждой <li>, умные люди пишут: ulflex-cont>li

167