Moving a DIV below a fixed-positioned element

Question

Moving a DIV below a fixed-positioned element

I have a website with a scrollable div. It works well, but I also need an absolutely positioned div on top of it - and it still needs to scroll smoothly without any hindrance.

You can check out a basic JSFiddle demonstration here: http://jsfiddle.net/41rawrks/

When you try to scroll the div using the mouse wheel or trackpad, the scrolling is interrupted when the cursor hovers over the other element. Is there a way to fix this issue?

I suspect that the DOM stops recognizing the cursor as being over the scrollable element once it reaches the draggable one (even though the draggable element is placed absolutely within the scrollable element).

How can I resolve this problem?

I didn't think it was feasible, but I found a site that accomplishes it!

javascript jquery html css jquery-ui

Answer 1

Answer №1

If you adjust the overflow property from #scrollDiv80s to its parent element #wrapper80s, the desired functionality is achieved:

#scrollDiv80s div {
    border: 1px solid black;
}
#wrapper80s, #wrapper90s, #wrapper00s {

    overflow-y: scroll; /* Updated */
    overflow-x: hidden; /* Updated */
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.decadeHeader {
    background-color: red;
    position: absolute;
    width: 100%;
    z-index: 99999;
    font-size: 28px;
    text-align: center;
}
.decadeHeader:hover {
    cursor: grab;
    cursor: -webkit-grab;
}
#scrollDiv80s {
    /* Removed overflow property from child element */
    border: none;
    height: 100%;
}

Answer 2

If you adjust the overflow property from #scrollDiv80s to its parent element #wrapper80s, the desired functionality is achieved:

#scrollDiv80s div {
    border: 1px solid black;
}
#wrapper80s, #wrapper90s, #wrapper00s {

    overflow-y: scroll; /* Updated */
    overflow-x: hidden; /* Updated */
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.decadeHeader {
    background-color: red;
    position: absolute;
    width: 100%;
    z-index: 99999;
    font-size: 28px;
    text-align: center;
}
.decadeHeader:hover {
    cursor: grab;
    cursor: -webkit-grab;
}
#scrollDiv80s {
    /* Removed overflow property from child element */
    border: none;
    height: 100%;
}

Answer 3

Answer №2

The answer consisted of a combination of previously mentioned strategies.

pointer-events: none resolved the issue of the scroll getting stuck, but it also interfered with the dragging functionality. The solution involved adding pointer-events: none to the draggable element only when the column was not scrolling.

Monitoring the scroll event (without mouseclick) was straightforward, I utilized the jQuery debounce to identify when the scrolling had come to a halt.

scrollers.scroll($.debounce( 250, function(){
    // Re-enable drag event
    $(this).next('.decadeHeader').css('pointer-events', 'auto');
}));

A simple yet effective solution!

Answer 4

The answer consisted of a combination of previously mentioned strategies.

pointer-events: none resolved the issue of the scroll getting stuck, but it also interfered with the dragging functionality. The solution involved adding pointer-events: none to the draggable element only when the column was not scrolling.

Monitoring the scroll event (without mouseclick) was straightforward, I utilized the jQuery debounce to identify when the scrolling had come to a halt.

scrollers.scroll($.debounce( 250, function(){
    // Re-enable drag event
    $(this).next('.decadeHeader').css('pointer-events', 'auto');
}));

A simple yet effective solution!

Answer 5

Answer №3

The element .decadeHeader remains static and does not scroll, allowing it to transfer the scroll event to the element below. In order for this to function properly, you will need to insert some child elements into .decadeHeader, such as:

Simply include the script "_ezswipe.js" from https://github.com/TNT-RoX/android-swipe-shim within your HTML file.

<script src="_ezswipe.js" type="text/javascript"></script>

Then assign the class "_ezswipe" to

<div class="decadeHeader ui-draggable ui-draggable-handle _ezswipe">

Lastly, implement a bit of code to propagate the event.

function catchEvent(e) {
    document.querySelector('#scrollDiv80s').scrollTop += (e.detail.delta.y*-1);
}
var el = document.querySelector("._ezswipe");
el.addEventListener("swipeMove", catchEvent, true);

View the Fiddle here http://jsfiddle.net/41rawrks/7/

Answer 6

The element .decadeHeader remains static and does not scroll, allowing it to transfer the scroll event to the element below. In order for this to function properly, you will need to insert some child elements into .decadeHeader, such as:

Simply include the script "_ezswipe.js" from https://github.com/TNT-RoX/android-swipe-shim within your HTML file.

<script src="_ezswipe.js" type="text/javascript"></script>

Then assign the class "_ezswipe" to

<div class="decadeHeader ui-draggable ui-draggable-handle _ezswipe">

Lastly, implement a bit of code to propagate the event.

function catchEvent(e) {
    document.querySelector('#scrollDiv80s').scrollTop += (e.detail.delta.y*-1);
}
var el = document.querySelector("._ezswipe");
el.addEventListener("swipeMove", catchEvent, true);

View the Fiddle here http://jsfiddle.net/41rawrks/7/

Answer 7

Answer №4

To prevent interaction with the blocking element, one option is to utilize pointer-events: none in CSS (although this may not be supported in IE10 and earlier versions). Another approach could involve including e.preventDefault in a mouseenter or mouseover event for that particular element.

Answer 8

To prevent interaction with the blocking element, one option is to utilize pointer-events: none in CSS (although this may not be supported in IE10 and earlier versions). Another approach could involve including e.preventDefault in a mouseenter or mouseover event for that particular element.

Moving a DIV below a fixed-positioned element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular JS is failing to update views when passing dynamic IDs

Issue: Attempting to access the `userName` property on an undefined object (`tem`), resulting in a TypeError while using flalist

Can the data retrieved from a jsonp call that may be considered "bad" be utilized effectively?

How to retrieve URL parameters from within the when() function in AngularJS

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

What distinguishes running rm -rf node_modules + npm i from using npm ci?

npm installs a multitude of dependencies

Issue with running `npm start` in React after installing React script version 3.4.0

Encountering a tucked-away issue with the Safari scroll bar?

What is the process for accessing jQuery methods in Node.js?

Struggling to close (or conceal) a modal following an ajax request

Suggestions for this screenplay

Downloading EJS File instead of Displaying on Express.js Router

retrieve information in json format from a specified web address

Guide on implementing a live media stream using JavaScript

What is the reason for a jQuery load to fail when www is included in the URL?

Sending data to API using AngularJS Http Post

What is the best way to eliminate a specific character from the key of an array of objects using JavaScript?

Preventing default form submission in jQuery: How to cancel it when a certain condition is met

Bootstrap button groups do not support the checking functionality of radio buttons