Home > Net >  How to prevent overflow scrolling
How to prevent overflow scrolling

Time：12-22

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 >
    <a href="" onClick=" onRouteClick('b'); return false; ">shop</a>
    <a  href="" onClick=" onRouteClick('a'); return false; ">
      <span >
        <div >
          <div >
            <div ></div>
          </div>
          <div >
            <div ></div>
          </div>
          <div >
            <div ></div>
          </div>
          <div >
            <div ></div>
          </div>
        </div>
      </span>
    </a>
    <a href="" onClick=" onRouteClick('c'); return false; ">contact</a>
  </div>
  <div >
    <div >
      <img  src="https://www.matteogiordano.info/PDF-logo-full.svg" />
    </div>
  </div>
  <div >
    <div >
      <br />
      <div >
        <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  id="servicediv">
    <div >
      <div >
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <div >
          <div ><img id="product" src="https://www.matteogiordano.info/product/10002.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10003.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10004.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10005.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10006.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10007.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10008.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10009.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10010.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10011.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10012.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10013.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10014.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10015.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10016.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10017.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10018.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10019.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10020.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10021.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10022.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10023.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10024.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10025.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10026.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10027.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10028.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10029.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10030.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10031.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10032.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10033.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10034.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10035.webp" /></div>
          <div ><img id="product" src="https://www.matteogiordano.info/product/10036.webp" /></div>
        </div>
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
        <!--SHOP-->
      </div>
    </div>
    <div >
      <div >
        <br />
        <div >
          contact <br /> [email protected] <br />  39 987654 00312
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

try this:

if(/*condition when you want to prevent scrolling*/) {
    window.addEventListener("wheel",
    (e)=> {
        console.log("wheel");
        e.preventDefault();
    },
    {passive:false}
    );
  }

CodePudding user response：

Max viewport width. CSS grid. Not wrapping with Flexbox. Using images without max-width.

Page link：https//www.codepudding.com/net/650773.html

Prev:How to make proper toggle button for radio input
Next:How to append "disable" attribute in button using React
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding