水平滚动鼠标滚轮。如何使模拟向左/向右滑动？

Question

该块中的水平滚动已经存在，可以通过鼠标滚轮使用。

如何制作一个类似物，但是借助滑动（在js中已经存在）的帮助？

有一个这样的内容水平滚动块。如果使用鼠标滚轮，则内容将分为几列，从一列平滑地移动到另一列，信息将通过滚轮翻转。 js中已添加了一个交换...如何实现交换，以便您也可以通过左右滑动从一列移至另一列，就像使用鼠标滚轮一样？

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

// 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 (!xDown || !yDown) {
    return;
  }

  const {
    clientX: xUp,
    clientY: yUp
  } = getTouch(e);
  const xDiff = xDown - xUp;
  const yDiff = yDown - yUp;
  const xDiffAbs = Math.abs(xDown - xUp);
  const yDiffAbs = Math.abs(yDown - yUp);

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

  if (xDiffAbs > yDiffAbs) {
    if ( xDiff > 0 ) {
      console.log('left');
    } else {
      console.log('right');
    }
  } else {
    if ( yDiff > 0 ) {
      console.log('up');
    } else {
      console.log('down');
    }
  }
});

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

@import url(https://fonts.googleapis.com/css?family=Montserrat);
html, body {
  overflow: hidden;
}



.poscustomtext {
    display: flex;
    justify-content: center;
    align-items: center;
}



.content-wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
}
.content-title {
  font-size: 12vh;
  line-height: 1.4;
}


article.mario {
    height: 100vh;
    width: calc(100vw - 0px);
    column-width: calc(100vw - 0px);
    column-gap: calc(5vw + 0px);
    /* column-gap: 317px; */
    column-rule: 2px dotted #ddd;
    overflow: auto;
    padding-top: 120px;
}
/*article.mario {
  height: 100vh;
  width: 100vw;
  column-width: 100vw;
  column-gap: 5vw;
  column-rule: 2px dotted #ddd;
  text-align: justify;
  overflow: auto;
  margin: auto;
}*/
article.mario {
    height: 80vh;
    width: calc(80vw - 0px);
    column-width: calc(80vw - 0px);
    column-gap: calc(5vw + 0px);
    /* column-gap: 317px; */
    column-rule: 2px dotted #ddd;
    overflow: auto;
    padding: 0 20px;
    border: solid 8px black;
}
article.mario:hover {
    border: solid 8px gold;
}
.emphase {
  display: block;
  background-color: #DDD;
  text-align: center;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>test</title>
  


  
<link rel="stylesheet" href="css/style.css">

</head>

<body>
  <section class="background">
    <div class="content-wrapper">
      <div class="poscustomtext"><article class="mario"><div class="customtext">
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;"><a href="http://vfl.ru/fotos/abca98b122166092.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/abca98b1/22166092_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a></div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">В ту пору, когда&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;была анонсирована, мода на стелс-экшены только-только начинала зарождаться, и любой мало-мальски приличный проект, хоть как-то позволяющий игроку бесшумно расправляться с неприятелями, сразу же нарекали “слелсом” и сталкивали лоб в лоб с&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Metal Gear Solid</span><span style="box-sizing: inherit;">.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Это только потом выяснится, что в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;вообще-то есть много и от&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">, и даже от&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Driver</span><span style="box-sizing: inherit;">. Да и сама по себе боевая система, включая знаменитую (да-да, ту самую, что позже будет популяризована не без помощи&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil 4</span><span style="box-sizing: inherit;">) камеру из-за плеча, куда ближе к&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">, нежели детищу&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Konami</span><span style="box-sizing: inherit;">. Но маркетинг ведь - штука сродни эпидемии: что надуют в ушко - в то и уверуешь.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И все было бы ничего, кабы датой релиза не значился конец 2001-го, а в качестве целевой платформы не был бы выбран Dreamcast. Тут даже к Ванге не ходи, чтобы понять всю абсурдность подобного решения - от консоли в ту пору уже публично открестилась даже сама&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Sega</span><span style="box-sizing: inherit;">, а мир с замиранием сердца ждал релиза второй части похождений Снейка. Неудивительно, что в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;в итоге сыграли три с половиной человека, а про вышедший спустя полгода PS2-порт львиная доля владельцев данной консоли даже и не слыхивала.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">А жаль, ведь игра вполне себе могла претендовать на лавры одного из лучших консольных экшенов того поколения. Что еще интереснее - перед нами практически уникальный пример проекта, на 80% состоящего из откровенной копипасты, но при этом умело связанной в единое и уж очень гармоничное целое. Причем, как это ни странно, даже обладающего своим узнаваемым лицом.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;"><a href="http://vfl.ru/fotos/ef190be422166093.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/ef190be4/22166093_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a></div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И хотя разработкой занималась никому доселе не известная шведская студия&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Amuze</span><span style="box-sizing: inherit;">, высоко задранную планку качества ощущаешь уже с первых минут. Оркестровые мотивы за авторством&nbsp;</span><span style="box-sizing: inherit; text-decoration-line: underline;">Ричарда Жака</span><span style="box-sizing: inherit;">&nbsp;(британского композитора, к тому времени уже сделавшего себе громкое имя благодаря внушительному списку “сеговских” проектов) пробирают до глубины души. FMV-вставки с “живыми” актерами, стилизованные под новостную сводку, удивляют не на шутку. Равно как и агитационные плакаты, которые можно наблюдать на экране загрузок.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Но вот уж где геймера ждет настоящий шок, так это на поприще графики. Великолепные модели персонажей (удивило разве что отсутствие мимики, да и сами лица объективно слабее, чем в той же&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Code Veronica</span><span style="box-sizing: inherit;">) и потрясающая детализация окружения, которую ранее, в основном, можно было наблюдать лишь на рендренных фонах - вот чего точно не следовало ожидать от безвестной команды шведов. Движок при этом очень редко дает сбои в виде просадки fps, а сама по себе картинка смотрится очень гладкой и четкой.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Слегка придя в себя от поросячьего восторга, начинаешь разбираться в деталях сюжета. В принципе, ничего из ряда вон здесь игра уже предложить не может. Завязка достаточно стандартна - по крайней мере, если проводить аналогии с художественными фильмами. Главный герой в лице Джека Вейда просыпается в госпитале, где встречается с дочерью убитого основателя ACN - крупнейшей корпорации, служащей законодательным органом будущего. Принципы ее функционирования очень просты - группа специальных агентов, именуемых “хэдхантерами”, выслеживает опаснейших преступников, после чего берет под стражу и отправляет в подводную тюрьму. Там провинившимся супостатам предлагается принять участие в гладиаторской битве на арене. В случае проигрыша ACN имеет право распорядиться внутренними органами потерпевшего фиаско человека на свое усмотрение.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Когда-то Джек и сам был “охотником за головами”, причем номером один. Именно поэтому Энджи и просит нашего героя помочь ей в расследовании убийства. Вот только те самые загадочные события, что привели Джека к больничной койке и амнезии, послужили причиной аннулирования “хэдхантерской” лицензии. Так что, процесс сбора мозаики под названием “Убийство Кристофера Штерна” придется объединить с так называемым “возвращением в школу”.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Поначалу сюжет развивается довольно-таки плавно. В лучших традициях&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">&nbsp;основную массу ключевых фактов можно подцепить не из роликов (здесь они представлены как в виде кат-сцен на движке, так и CG-видео), а при помощи различных документов и записок, так что не ленитесь осматривать каждый уголок. Однако ближе к финалу вектор развития кардинально сменится, шагнув от былого (уж простите за небольшой спойлер) футуристического детектива в сторону научной фантастики с характерными для нее нотками антиутопии.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;"><a href="http://vfl.ru/fotos/322911f922166094.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/322911f9/22166094_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a></div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">С точки же зрения геймплея,</span><span style="box-sizing: inherit; font-weight: bolder;">&nbsp;Headhunter</span><span style="box-sizing: inherit;">&nbsp;представляет собой достаточно интересный симбиоз сразу нескольких проектов, названия которых были обозначены в самом начале статьи. Передвижение между ключевыми точками осуществляется верхом на байке, модель управления которым достаточно своеобразна. Да и сам город отличается на редкость убогой проработкой - страшненькие здания с размазанными текстурками, полнейшее отсутствие интерактивности и жителей на улицах. Что таким образом пытались нам показать разработчики - решительно непонятно.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Основное же действие будет разворачиваться на локациях закрытого типа, как правило отличающихся внушительными размерами. Набор самый стандартный: заправка, офисное здание, морской порт, торговый центр. В ряде случаев будет необходимо решить какую-нибудь головоломку, как правило построенную на стандартном скелете “возьми предмет там и примени его здесь”. В общем, ничего особенного - поклонники&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Silent Hill</span><span style="box-sizing: inherit;">&nbsp;и&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">&nbsp;справятся в два счета.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Куда интереснее дела обстоят с экшен-составляющей, изрядно смахивающей на серию&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">. Герой достаточно подвижен - например, может лихо троллить своих врагов, перекатываясь из стороны в сторону. Да, сейчас это уже никого не удивляет, но тогда смотрелось вполне себе в новинку. Вы, конечно же, не поверите, но одной из первых игр (самой первой, если что, был дремучий экшен&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">WinBack</span><span style="box-sizing: inherit;">&nbsp;1999 года розлива) с пресловутой возможностью стрелять из-за угла или баррикад стала именно&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunder</span><span style="box-sizing: inherit;">.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Арсенал у Джека самый стандартный - пистолет, дробовик, автомат, гранатомет и еще парочка взрывоопасных экземпляров. Единственное новаторство - это пустые гильзы, которые можно использовать для привлечения врагов. Правда, рассчитать траекторию полета оных с высокой точностью порой оказывается достаточно трудно, так что назвать все эту затею хорошей и удобной язык не повернется. Лучше уж старое-доброе “снейковское” простукивание стен.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">К слову, о&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Metal Gear Soild</span><span style="box-sizing: inherit;">. В игре есть ровным счетом три незначительных момента, которые, собственно, и роднят детище&nbsp;</span><span style="box-sizing: inherit; text-decoration-line: underline;">Кодзимы</span><span style="box-sizing: inherit;">&nbsp;с нашим пациентом. Первое - стелс-миссии, с которыми придется регулярно иметь дело в процессе получения лицензий. Тут уж действительно настоящий "стелс" - никакого оружия кроме собственных рук, с помощью которых Джек не прочь свернуть вражескую шею и вышеупомянутые гильзы. Второе - это оформление самой виртуальной реальности, внутри которой и будет проходить выполнение тестов. Наконец, последнее - это часы с возможностью совершения видеозвонка. Эдакий продвинутый вариант знаменитого кодека.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И, наконец, отдельным пунктом хотелось выделить боссов, в работе над которыми&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Amuze</span><span style="box-sizing: inherit;">постаралась как следует. Особой харизмой здешние злодеи похвастаться не могут, однако куда важнее для нас тот факт, что каждая битва строго уникальна и требует сугубо индивидуального подхода к тому или иному супостату. Никакой рутиной в духе “хоровод вокруг громилы с последующим “спусканием” в его тушку всего имеющегося арсенала” здесь не пахнет и подавно.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;"><a href="http://vfl.ru/fotos/fa38ef5422166095.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362397/fa38ef54/22166095_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a></div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Подводя итоги, хочется сказать, что судьба&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">***</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И напоследок… о сиквеле замолвите слово.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">В 2004-м году на PS2 и Xbox вышло продолжение под названием&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption</span><span style="box-sizing: inherit;">, действие которого разворачивалось спустя 20 лет с момента окончания оригинальной игры. За прошедшие годы виртуальный мир сильно изменился - теперь это уже был чистейший киберпанк с присущими для него неоновыми небоскребами, а нотки антиутопии заиграли еще сильнее. Как итог - жителей города распределили между двумя кастами, низшей и высшей.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Несмотря на ряд объективных достоинств, плохого в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption&nbsp;</span><span style="box-sizing: inherit;">было куда больше. Это и невнятный сюжет, и странное управление с какой-то совершенно недекватной системой прицеливания. Наконец, сменив сеттинг, игра сильно сдала в плане разнообразия локаций. Да и сам по себе графический движок по меркам 2004 года смотрелся просто достойно, но не более того.</span></p>
</div></article></div>
    </div>
  </section>
</div></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>




</body>

</html>