Scrollable content below the div

Question

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/

Here is the HTML structure:

<div class="body">
    <div class="above">
       <!-- Content here longer than the height -->
    </div>
</div>

And the relevant CSS:

.above {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    background: red;
    z-index: 10;
    position: fixed;
}

My question is, how can I prevent the body from scrolling when the floating div is scrolled to its top or bottom? Any help or insights would be greatly appreciated. Thank you!

EDIT: I forgot to mention that this issue was specifically observed on an iPad device. I've experimented with adding body {overflow: hidden} as suggested by others, which does resolve the problem on desktop browsers but persists on touch-based browsers.

css html

Answer 1

Answer №1

Computer

This is the way scrolling functions. To prevent scrolling, you can temporarily disable the body's scroll property either manually or triggered by user interaction.

For instance, you could restrict the body's scroll when the user hovers over a floating div by using...

body{overflow:hidden}

and then restore scrolling when the user moves away from the floating div by utilizing...

body{overflow:auto}

Smartphone

Mobile devices require touch events for this functionality. While I have not personally tested it, theoretically, this approach should work.

var $body = document.querySelector('.body'),
    $above = document.querySelector('.above');

$above.addEventListener('ontouchstart', onAboveStart, false);
$body.addEventListener('ontouchstart', onBodyStart, false);


function onAboveStart()
{
        $body.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
}

function onBodyStart()
{
        $body.removeEventListener('ontouchmove', function(e) {e.preventDefault()});
}

Answer 2

Computer

This is the way scrolling functions. To prevent scrolling, you can temporarily disable the body's scroll property either manually or triggered by user interaction.

For instance, you could restrict the body's scroll when the user hovers over a floating div by using...

body{overflow:hidden}

and then restore scrolling when the user moves away from the floating div by utilizing...

body{overflow:auto}

Smartphone

Mobile devices require touch events for this functionality. While I have not personally tested it, theoretically, this approach should work.

var $body = document.querySelector('.body'),
    $above = document.querySelector('.above');

$above.addEventListener('ontouchstart', onAboveStart, false);
$body.addEventListener('ontouchstart', onBodyStart, false);


function onAboveStart()
{
        $body.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
}

function onBodyStart()
{
        $body.removeEventListener('ontouchmove', function(e) {e.preventDefault()});
}

Scrollable content below the div

Answer №1

Similar questions

What is the method for including a placeholder with sequential numbering?

Input form and select form collide in conflict when the "Enter" key is activated

Utilize HTML to resize image to fit within container

Can someone help me transform this LESS code into SCSS?

Using CSS to apply a gradient over an img element

Is there a way to hide the borders between cells within these divs?

What can I do to stop hidden HTML tags from loading on my page? Is it possible to completely remove them from the page

When a user toggles one div, the other toggled div should automatically close

Font Awesome functions properly on one Angular component but not on the second one

Transfer data from an HTML form -> call the ajax load() function

Ways to execute a function when clicking on a date using HTML 5 datepicker input type

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Selection of country and state in a form

What steps should be taken when encountering the "Cannot Get" error message on a webpage?

Ways to incorporate style links in Angular v2 components?

Limit Use of Special Characters in HTML and AngularJS

Show dynamic HTML Dropdowns with nested JSON data

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

Utilize Bootstrap's custom validation exclusively on fields that are invalid