Question

我正在尝试制作仅水平滚动的相册页面。我想使其在向下滚动时向右滚动，在向上滚动时向左滚动等，而不禁用标准的左右滚动。我为上下文提供了一个小提琴。预先感谢-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;
  }

Answer 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)    
});

您会理解的：）

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

1 个答案: