Prevent Scrolling of Body Content within a Specified Div

Question

Prevent Scrolling of Body Content within a Specified Div

In my current situation, I am dealing with a large number of divs (over 300) that are being used as part of an interactive background. The issue arises when viewing the page on mobile versus desktop – there are too many divs on desktop, causing excessive scrolling. Is there a way to automatically remove divs below a certain point or prevent scrolling beyond a specified number of pixels?

I have tried various methods such as adjusting margins, padding, overflow, and using position: fixed; without success. Please understand that I am genuinely struggling with this problem and any help would be greatly appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

There are 2 solutions to address this issue:

Enclose all your content within a div and specify its height with overflow-y: hidden.

.wrapper{
   height: 1000px; overflow-y: hidden
 }

Alternatively, use CSS to conceal elements beyond a certain threshold. For instance, to hide all divs after 100:

.container .className:nth-child(n+101) {
    display: none;
  }

This code snippet will effectively hide all the divs following the 100th one.

Answer 2

There are 2 solutions to address this issue:

Enclose all your content within a div and specify its height with overflow-y: hidden.

.wrapper{
   height: 1000px; overflow-y: hidden
 }

Alternatively, use CSS to conceal elements beyond a certain threshold. For instance, to hide all divs after 100:

.container .className:nth-child(n+101) {
    display: none;
  }

This code snippet will effectively hide all the divs following the 100th one.

Answer 3

Answer №2

Wrap all your div elements inside a parent container div and apply the following CSS:

.container{
   max-height:900px; // Adjust this value to set the desired scroll height
   overflow:hidden;
}

I have set the max-height to 900px because I want to display only 9 divs, each with a height of 100px.

SNIPPET

.item {
  width: 100%;
  height: 100px;
  background-color: red;
}

.item:hover {
  background-color: yellow;
}

.container {
  max-height: 900px;
  overflow: hidden;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  
  <!-- You cannot scroll beyond these items -->
  
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

Answer 4

Wrap all your div elements inside a parent container div and apply the following CSS:

.container{
   max-height:900px; // Adjust this value to set the desired scroll height
   overflow:hidden;
}

I have set the max-height to 900px because I want to display only 9 divs, each with a height of 100px.

SNIPPET

.item {
  width: 100%;
  height: 100px;
  background-color: red;
}

.item:hover {
  background-color: yellow;
}

.container {
  max-height: 900px;
  overflow: hidden;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  
  <!-- You cannot scroll beyond these items -->
  
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

Prevent Scrolling of Body Content within a Specified Div

Answer №1

Answer №2

Similar questions

In AngularJS, the process of replacing text using a filter can be achieved by following

Explore in MegaMenu Pop-up

Exploring the process of creating a interactive rectangular border on an image with JavaScript

Tips for ensuring the accurate retrieval of prop values by waiting for the value to be set

In Javascript, merge two arrays together in a specific format

Tips for customizing vue-bootstrap-datetimepicker: Adjusting width and adding icons for a personalized touch

How to pass PHP echo to success parameter in jQuery AJAX commands

Having trouble with Wookmark not working in Jquery UI?

Firefox 3 fails to utilize cache when an ajax request is made while the page is loading

Guide on how to include jquery-ui css file in Vue3

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?

Awesome method of redirecting outdated URLs to the most recent established URL

Angular SPA boasting an impressive one million pages

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

Having trouble modifying the image source within a parent div that contains dynamic images? Let me assist you in fixing the Uncaught Syntax

Using Node's Express bodyParser() to access a JSON string that has been parsed

The modals are all tangled up and now spilling over the edges

Extracting information from Python Bottle with the help of AJAX jQuery

Struggles with closing dropdown menus

Performing a numerical evaluation within a conditional if/else statement