向下滚动向右滚动，向上滚动向左答案

【问题标题】：scroll right by scrolling down, left by scrolling up向下滚动向右滚动，向上滚动向左
【发布时间】：2018-09-19 01:33:05
【问题描述】：

我正在尝试制作一个仅水平滚动的照片库页面。我想让它在我向下滚动时向右滚动，向上滚动时向左滚动等，而不禁用标准的左右滚动。我已经为上下文提供了一个小提琴。提前致谢 - https://jsfiddle.net/JosueOrNoSway/6ds7mqkf/2/

html-

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
    <title>Photo Gallery</title>
    </head>

    <body>
      <h1>Photo Gallery</h1>

      <div class="gallery">

        <ul class="top-row">
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>

          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
            <li>
              <div class="filler"></div>
          </li>
          <li>
            <div class="filler"></div>
          </li>
        </ul>

        <ul class="bottom-row">
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
            <li>
              <div class="filler2"></div>
          </li>
          <li>
            <div class="filler2"></div>
          </li>
        </ul>
      </div>

    <script type="text/javascript" src="js/lightbox-plus-jquery.min.js"> 
      </script>
    <script src="js/main.js"></script>
  </body>
</html>

css -

body {
  font-family: sans-serif;
  background: #000;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-y: hidden;
}

h1 {
  color: #fff;
  margin: 50px 0 0 100px;
  font-size: 5rem;
}

.gallery {
  margin: 10px 50px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  width: 300vw;
  }

【问题讨论】：

Horizontal scrolling with mouse wheel in a div的可能重复

标签： javascript jquery html css

【解决方案1】：

试试这个Fiddle

var pos = 0;
$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    pos = pos + 50;
  } else {
    if (pos > 1) {

      pos = pos - 50;
    }    
  }
  $('#yscroll').scrollLeft(pos)    
});

你会明白的:)

【讨论】：

正是我要找的 Munkhdelger！不是很明白，谢谢大家的帮助！
很高兴它在那时有所帮助。将此答案标记为已接受，这将鼓励人们回答更有帮助的答案