scroll right by scrolling down, left by scrolling up

Question

I'm attempting to make a photo gallery page that scrolls horizontally only. I would like to make it scroll to the right when I scroll down, to left when scrolling up etc., without disabling the standard left and right scrolling. I've included a fiddle for context. Thanks in advance - 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

Try this 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)    
});

you will understand this :)

scroll right by scrolling down, left by scrolling up

Question

1 answers

solution1
0 ACCPTED 2018-09-19 02:19:21

scroll right by scrolling down, left by scrolling up

Question

1 answers

solution1 0 ACCPTED 2018-09-19 02:19:21

solution1
0 ACCPTED 2018-09-19 02:19:21