As the div elements stack up and you scroll towards the top or bottom

Question

As the div elements stack up and you scroll towards the top or bottom

I am dealing with two nested DIVs that are both scrollable.

When I scroll the "inside div" (the green one in the attached file), and reach the bottom of the DIV, it starts scrolling the DIV beneath it. How can I prevent the DIV beneath from scrolling only when I scroll the top DIV?

<div class="container">

<div class="neneathDiv">
  blah blah <br>blah blah <br>... (content truncated for brevity)
  <div class="topDiv">
    blah blah <br>blah blah <br>... (content truncated for brevity)
  </div>

</div>

.container{background-color: blue; }
.topDiv{background-color: green; width: 300px; position: absolute; top: 0; 
          right:0; height: 100%; z-index: 99; overflow: auto;}
.neneathDiv{background-color: red; height: 100px;  height: 100%; overflow: auto;}

Here's a Demo showcasing my issue

html css

Answer 1

Answer №1

If you want to see an example, make sure to include jquery in your page:

jQuery(function($) {
    $('.topDiv').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $('body').addClass("hide");
        } else {
            $('body').removeClass("hide");
        }
    });
});

https://jsfiddle.net/s4yzpwk9/8/

Answer 2

If you want to see an example, make sure to include jquery in your page:

jQuery(function($) {
    $('.topDiv').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $('body').addClass("hide");
        } else {
            $('body').removeClass("hide");
        }
    });
});

https://jsfiddle.net/s4yzpwk9/8/

Answer 3

Answer №2

Are you familiar with using javascript and jQuery?

If so, check out this solution:

Take a look at this fiddle

$(".topDiv").bind( 'mousewheel DOMMouseScroll', function ( e ) {
                    //Capture the original Event
                    var e0 = e.originalEvent,
                    //Determine the scroll movement 
                    delta = e0.wheelDelta ;
                    //Adjust the scrollTop value based on scroll direction
                    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
                    //Only apply the scroll to the specified element      
                    e.preventDefault();
                    //Prevent the default scroll behavior
                });

For more information, visit the original post at: How can I prevent scrolling when reaching the bottom of a div using jQuery?

Answer 4

Are you familiar with using javascript and jQuery?

If so, check out this solution:

Take a look at this fiddle

$(".topDiv").bind( 'mousewheel DOMMouseScroll', function ( e ) {
                    //Capture the original Event
                    var e0 = e.originalEvent,
                    //Determine the scroll movement 
                    delta = e0.wheelDelta ;
                    //Adjust the scrollTop value based on scroll direction
                    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
                    //Only apply the scroll to the specified element      
                    e.preventDefault();
                    //Prevent the default scroll behavior
                });

For more information, visit the original post at: How can I prevent scrolling when reaching the bottom of a div using jQuery?

Answer 5

Answer №3

Give this code a shot, it might just do the trick for you.

$( '.mainContainer' ).on( 'wheel mousewheel', function ( event ) {
var e = event.originalEvent,
    delta = e.wheelDelta || -e.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
event.preventDefault();
 });

Answer 6

Give this code a shot, it might just do the trick for you.

$( '.mainContainer' ).on( 'wheel mousewheel', function ( event ) {
var e = event.originalEvent,
    delta = e.wheelDelta || -e.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
event.preventDefault();
 });

Answer 7

Answer №4

The situation is behaving correctly because your page extends beyond the viewport. To address this, you can utilize JavaScript to capture the scrolling event and prevent it from affecting a specific element or adjust the structure of your page accordingly.

One approach could involve limiting the height of the body and concealing any overflow.

body, html, .container {padding:0; margin:0; height:100%; max-height:100%;}
.container {overflow: hidden;}

Example implementation can be seen here: https://jsfiddle.net/s4yzpwk9/6/

Answer 8

The situation is behaving correctly because your page extends beyond the viewport. To address this, you can utilize JavaScript to capture the scrolling event and prevent it from affecting a specific element or adjust the structure of your page accordingly.

One approach could involve limiting the height of the body and concealing any overflow.

body, html, .container {padding:0; margin:0; height:100%; max-height:100%;}
.container {overflow: hidden;}

Example implementation can be seen here: https://jsfiddle.net/s4yzpwk9/6/

As the div elements stack up and you scroll towards the top or bottom

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

'Dynamic' styling in Next.js using conditional CSS

Variation in functionality of onclick in javascript

Adjusting the transparency of the background without altering its colors

Tailwind CSS - when it comes to styling, larger screen media queries are taking precedence over smaller media queries

Eliminate extraneous space with the clearfix:after pseudo-element

The div element is experiencing a resizing issue

What is the reason behind using <script> tag for scripts, instead of using <style> tag for external CSS files?

Display a pop-up upon clicking a button

The production build for Angular 9 Keyvalues pipe fails to compile

Effortlessly Styling Children Elements in Emotion JS When Parent Element is Hovered

Full-width sub menu within the menu

An error occurs when attempting to assign a value to a MUI file TextField

Align the top navigation centered horizontally, with the logo on the left and language selection on the right

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

The navigation toggler seems to be malfunctioning in the browser, but it is functioning properly on Code

Exploring the usage of slots in WebComponents without relying on shadow DOM

Ways to create a clickable red button

IE8 is not properly handling nested HTML elements that have the display:none property set

Achieve button highlighting by hovering over the card - Bootstrap 5

Guide to collapsing all menus in an Angular 4 Accordion