HTML Scrolling Issue (I want to get rid of the buttons, horizontal option, and leave the snapping on)

Question

I would like to have a cool scroll effect that locks each div id on the page, but I am not sure how to. Here is what it looks like https://test.iamnotregis.repl.co/ -_-

I deleted the css because it is not needed but I will still link the project on repl.it https://repl.it/@IAmNotRegis/test#index.html

    <!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="script.js"></script>

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>

    <div id="controls">
      <button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
      <button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
    </div>

    </body>
    </html>

    function toggleSnap() {
      var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
      document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
    }

    function toggleDirection() {
      var isVertical = document.getElementById('carousel').classList.toggle('vertical');
      document.getElementById('otherScrollState').innerText = isVertical 
    }

    #carousel {
      /* Ensure that the contents flow horizontally */
      overflow-x: auto;
      white-space: nowrap;
      display: flex;
    }

    #carousel.vertical {
      flex-direction: column;
    }

    /* 2018 spec - For Safari 11, Chrome 69+ */
    #carousel.snap {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
    }

    #carousel.snap > div {
      scroll-snap-align: center;
    }

    #carousel.snap.vertical {
      flex-direction: column;
      scroll-snap-type: y mandatory;
    }



    /* 2015 spec - For Firefox, Edge, IE */
    #carousel.snap {
      scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
      scroll-snap-points-x: repeat(100%);
      -ms-scroll-snap-points-x: repeat(100%);
    }

    #carousel.snap.vertical {
      scroll-snap-points-x: initial;
      -ms-scroll-snap-points-x: initial;
      scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
    }

Answer 1

Remove the "controls" div from your index.html

<!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>


    </body>
    </html>

The javascript functions toggleSnap() and toggleDirection() you dont need anymore you can remove them too.

But the styles.css file is mandatory. The CSS styles ensure that the snap magic kicks in.

#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap > div {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}


/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#carousel > div {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel-1 {
  background-color: #e34747;
}

#carousel-2 {
  background-color: #5ab92c;
}

#carousel-3 {
  background-color: #226de2;
}

#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}

If you want it to scroll vertically, add that class "vertical" name to your "Carousel" div as well.

<div id="carousel" class="snap vertical">

HTML Scrolling Issue (I want to get rid of the buttons, horizontal option, and leave the snapping on)

Question

1 answers

solution1
1 ACCPTED 2021-01-09 01:51:51

HTML Scrolling Issue (I want to get rid of the buttons, horizontal option, and leave the snapping on)

Question

1 answers

solution1 1 ACCPTED 2021-01-09 01:51:51

solution1
1 ACCPTED 2021-01-09 01:51:51