How to prevent overflow scrolling - Jquery

cat
December 21, 2022
303 views
0 votes
2 Answers

I’m working on a three-section website:
the main section is a landing page with sticky elements and is set on autoflow at the moment,

the about section has to be a position fixed,
and the shop section has to stop scrolling when my elements (clothes) reach the end.

The main issue is that I don’t know how to block the scrolling on my shop section when the items are all displayed and avoid overflow.
I would need that in the shop section when the products are finished Is not possible to scroll and see the black background below

here is my code snippet,
please test the snippet and go
Full page to have an idea of my issue in action.

If faster just go there:
https://codepen.io/cat999/pen/eYjmMdV

Many thanks in advance.

const appRoot = document.getElementById("page");
const nav = document.querySelector(".navigation");
const root = document.documentElement;
const endTransition = () => {
  const loader = document.querySelector(".loader");
  loader.addEventListener("transitionend", () => {
    loader.style.opacity = '0';
    root.classList.remove("disable-hover");
  });
  loader.style.opacity = '1';
};

const startTransition = () => {
  const loader = document.querySelector(".loader");
  loader.style.opacity = "opacity:1";
  appRoot.dataset.route = "a";
};

nav.addEventListener("click", (e) => {
  if (e.target.nodeName === "A") {
    let a = Array.from(nav.children).find((v) => v.closest(".active"));
    root.classList.add("disable-hover");
    a.classList.remove("active");
    e.target.classList.add("active");
    e.preventDefault();
  }
});

const onRouteClick = (route) => {
  if (appRoot.dataset.route === route) return;
  appRoot.dataset.route = route;
  endTransition();
};

window.addEventListener("load", () => {
  startTransition();
});

$(".navigation").click(function() {
  jQuery('html,body').animate({
    scrollTop: 0
  }, 2000);
})

/* SSHOP*/

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr)); // px em rem % cm fr auto
  grid-template-rows: auto;
  grid-gap: 1rem 0.5rem;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
}


/* Style Shits :p */

.box {
  background-color: #f4f4f6;
  height: 220px;
}

.grid {
  background-color: #f4f4f6;
  /* Style Shits :p */
}

#product {
  object-fit: contain;
  width: 100%;
  height: 100%;
}


/* SHOP */


/*CUBE*/

.parent {
  transform: translate(-50%, -50%);
  position: absolute;
  perspective: 1340px;
  perspective-origin: 50% 100px;
  margin: 1vmin auto auto;
  padding: 0rem;
  perspective-origin: 50% 100px;
}

.cube {
  animation: cube-spin 4.5s cubic-bezier(0.46, -0.43, 0, 1.15) infinite;
  animation-delay: 0s;
  height: 60px;
  position: relative;
  width: 60px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.block {
  background-color: black;
  border: 1px solid black;
  height: 60px;
  position: absolute;
  width: 60px;
}

.face {
  background-image: url("https://www.matteogiordano.info/formy-d.svg");
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.block--left {
  transform: rotateY(270deg) translateX(-30px);
  transform-origin: center left;
}

.block--left .face {
  background-image: url("https://www.matteogiordano.info/formy-p.svg");
}

.block--right {
  transform: rotateY(-270deg) translateX(30px);
  transform-origin: top right;
}

.block--right .face {
  background-image: url("https://www.matteogiordano.info/formy-f5.svg");
}

.block--front {
  transform: translateZ(30px);
}

.block--front .face {
  background-image: url("https://www.matteogiordano.info/formy-prj.svg");
}

.block--back {
  transform: translateZ(-30px) rotateY(180deg);
}

.block--back .face {
  background-color: #ff822d;
}

@keyframes cube-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}


/*GRID MAIN PAGE*/

ul {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(15, 20vh);
  /*height: 500vh;*/
  height: auto-flow;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: #6c5ce7;
  position: sticky;
  height: 80vh;
  top: 0;
}

li {
  border-radius: 2rem;
}

li:nth-of-type(1) {
  position: relative;
  background: red;
  grid-area: 10/18;
  z-index: 9;
  grid-column: 2 / span 9;
}

li:nth-of-type(2) {
  top: 80px;
  height: 80vh;
  background: black;
  grid-area: 5/13;
  grid-column: 7 / span 12;
  z-index: 8;
}

li:nth-of-type(3) {
  position: relative;
  grid-area: 15/9;
  grid-column: 15 / span 9;
  background: green;
  z-index: 9;
}

li:nth-of-type(4) {
  grid-area: 15/4;
}

li:nth-of-type(5) {
  grid-area: 12/5;
}

#cappello {
  background: red;
  width: 100%;
}

#cover {
  border-radius: 2rem;
  overflow: hidden;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

#cover2 {
  border-radius: 2rem;
  overflow: hidden;
  object-fit: contain;
  object-position: center center;
  height: 100%;
  width: 100%;
}

#cover3 {
  border-radius: 2rem;
  overflow: hidden;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

#cover4 {
  border-radius: 2rem;
  overflow: hidden;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

@font-face {
  font-family: Estragon Variable;
  src: url(https://dinamopipeline.com/fonts/Estragon-Variable-Decomposed.d7f7786.woff2) format("woff2"), url(https://dinamopipeline.com/fonts/Estragon-Variable-Decomposed.925b3c5.woff) format("woff");
}

body {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/*
.at , .tc{
  position:fixed;
   width:100%;
  height:100%;
    top: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:0!important;
}*/

.b,
.c {
  padding-top: 10vh;
}

img {
  width: 100vw;
  height: auto;
}

.svgloader {
  width: 70vw;
}

.svgloadercontainer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0 !important;
}

.container-shop {
  width: 100vw;
  max-height: 1200px !important;
}

.c {
  position: fixed !important;
}

.c {
  color: white !important;
  background: black;
  width: 100vw;
}

body {
  font-family: Estragon Variable;
  font-size: 1vmax;
  text-transform: capitalize;
  font-variation-settings: "wght" 120.081;
  line-height: 1;
  /* font-weight: lighter; */
  color: #ff6699;
  /* PINK */
  -webkit-font-smoothing: antialiased;
  background-color: black;
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 10vw;
  }
}

.navigation {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 30vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 7;
}

@media only screen and (max-width: 1100px) {
  .navigation {
    width: 100vw;
    top: auto;
  }
}

@media only screen and (max-width: 600px) {
  .navigation {
    bottom: 2vh !important;
  }
}

.navigation a {
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 3vmax;
  font-size: 1rem;
  text-transform: uppercase;
  font-family: "Estragon Variable";
  font-variation-settings: "wght" 300;
  /*border: 1px solid;*/
  border-radius: 2rem;
  margin: 1rem auto;
  /*background-color: rgba(255, 255, 255, 0.3);*/
  text-align: center;
  line-height: 1;
  /*-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);*/
}

@media only screen and (max-width: 600px) {
  .navigation a {
    padding: 0.5rem 3vmax;
  }
}


/*

 .navigation a:hover {
     background-color: #252525;
     color: #fdfdfd;
}
 .navigation a.active {
     /*background-color: #252525;
     color: #fdfdfd;
}*/

#page {
  //min-width: 100vw;
  //min-height: 100vh;
  overflow: hidden;
}

.container {
  cursor: crosshair !important;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  inset: 0;
}

.loader {
  position: fixed;
  inset: 0;
  height: 100vh !important;
  z-index: 5;
  background-color: none;
  opacity: 0;
  transition: 1s;
  will-change: opacity;
}

.a,
.b,
.c {
  //display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: 0.5s;
  transition-delay: -0.1s;
  transition-timing-function: ease-in-out;
  height: 100%;
}

.ac {
  margin: auto;
}

[data-route="a"] .a,
[data-route="b"] .b,
[data-route="c"] .c {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 1s ease-in 0.9s;
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
  cursor: none;
  cursor: wait;
}

[data-route="b"] .b {
  opacity: 1;
  margin: 0;
  padding: 0;
  background: blanchedalmond;
  visibility: visible;
  pointer-events: all;
  transition: opacity 1s ease-in 0.9s;
}

.nav-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 4rem;
  margin: 0;
  overflow: hidden;
  background-color: #f00;
  // outline: 1px solid red;
}

.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  margin: 0 0 -2rem;
  font-size: 0;
  white-space: nowrap;
  overflow-x: auto;
}

.nav-item {
  display: inline-block;
  margin: 0;
  padding: 1.1rem 1rem 0.9rem;
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<div id="page">
  <div class="navigation">
    <a href="" onClick=" onRouteClick('b'); return false; ">shop</a>
    <a class="active" href="" onClick=" onRouteClick('a'); return false; ">
      <span class="parent">
        <div class="cube">
          <div class="block block--left">
            <div class="face"></div>
          </div>
          <div class="block block--right">
            <div class="face"></div>
          </div>
          <div class="block block--front">
            <div class="face"></div>
          </div>
          <div class="block block--back">
            <div class="face"></div>
          </div>
        </div>
      </span>
    </a>
    <a href="" onClick=" onRouteClick('c'); return false; ">contact</a>
  </div>
  <div class="loader">
    <div class="svgloadercontainer">
      <img class="svgloader" src="https://www.matteogiordano.info/PDF-logo-full.svg" />
    </div>
  </div>
  <div class="container">
    <div class="a">
      <br />
      <div class="at ac">
        <ul>
          <li>cappello <img id="cappello" src="https://www.mybudapester.com/media/catalog/product/cache/5/image/900x900/9df78eab33525d08d6e5fb8d27136e95/i/m/image_3681_1_24273_2_26666.jpg.png" />
          </li>
          <li>
            <img id="cover" src="https://cdn.shopify.com/s/files/1/0828/1793/files/70.png?v=1650757796" />
          </li>
          <li>eee</li>
        </ul>

        <ul>
          <li>fff</li>
          <li><img id="cover2" src="https://images.squarespace-cdn.com/content/v1/56c346b607eaa09d9189a870/1566522790958-JC8XC2HRY1BGQAUBGDOX/Flaunt+S.R.+STUDIO.+LA.+CA8.jpg?format=2500w" />
          </li>
          <li>eee</li>
          <li>eee</li>
        </ul>

        <ul>
          <li>fff</li>
          <li><img id="cover3" src="https://www.productionparadise.com/newsletters/1831/photos/48690/web_original/3-raf-simons-ss21-for-dust-magazine-by-willy-vanderperre-styled-by-olivier-rizzo.jpg" />
          </li>
          <li>eee</li>
        </ul>

        <ul>
          <li>cappello <img id="" src="" /></li>

          <li>
            <img id="cover4" src="https://imgstatic.soldoutservice.com/XCBlBcxa/c09b892829c/s2000/travis-scott-bottega-veneta-digital-cover.jpg" />
          </li>
          <li>eee</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-shop" id="servicediv">
    <div class="b">
      <div class="bt ac">
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <div class="grid">
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10002.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10003.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10004.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10005.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10006.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10007.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10008.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10009.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10010.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10011.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10012.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10013.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10014.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10015.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10016.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10017.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10018.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10019.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10020.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10021.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10022.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10023.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10024.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10025.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10026.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10027.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10028.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10029.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10030.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10031.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10032.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10033.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10034.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10035.webp" /></div>
          <div class="box"><img id="product" src="https://www.matteogiordano.info/product/10036.webp" /></div>
        </div>
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
      </div>
    </div>
    <div class="container">
      <div class="c">
        <br />
        <div class="ct ac">
          contact <br /> [email protected] <br /> +39 987654 00312
        </div>
      </div>
    </div>
  </div>
</div>

Answers

- dummycode
- December 22, 2022 at 1:28 am
- 0 votes
0
try this:
```
if(/*condition when you want to prevent scrolling*/) {
    window.addEventListener("wheel",
    (e)=> {
        console.log("wheel");
        e.preventDefault();
    },
    {passive:false}
    );
  }
```
Login or Signup to reply.

- ShivamRana
- December 22, 2022 at 6:53 am
- 0 votes
0
Max viewport width.
CSS grid.
Not wrapping with Flexbox.
Using images without max-width.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How to prevent overflow scrolling – Jquery

Answers