Navigate through the div only when the other divs are not being navigated

Question

Navigate through the div only when the other divs are not being navigated

Here is a demonstration of what I am trying to accomplish using jsFiddle.

In my design, I have multiple div elements within the parent window size, preventing the need for scrolling on the body.

The goal is to listen for the scroll event on the window, and if no other div is being scrolled (i.e., nothing else is moving), then the .mainContent should start scrolling.

For instance, if I am scrolling within the .sidebar, only the sidebar should scroll. However, if I move the mouse wheel at the right edge, indicating no active scrolling, then the .mainContent div should scroll instead, mimicking an overflow behavior as if the body had more content.

Does this explanation make sense?

My question is how can I detect when no other element is currently being scrolled with the mouse wheel input so that I can trigger the scrolling action on the .mainContent in such situations?

javascript jquery html css scroll

Answer 1

Answer №1

Here is a suggestion for you to try:

$(window).bind('mousewheel', function (event) {
    var isHover = $('.mainContent').is(':hover');

    if (!isHover) {
        $('.sidebar').scrollTop($('.sidebar').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

Check out this example on jsfiddle

Answer 2

Here is a suggestion for you to try:

$(window).bind('mousewheel', function (event) {
    var isHover = $('.mainContent').is(':hover');

    if (!isHover) {
        $('.sidebar').scrollTop($('.sidebar').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

Check out this example on jsfiddle

Answer 3

Answer №2

Take a look at this JSFiddle. It is compatible with most web browsers:

//Swap values of the below two variables if required
var scrollDiv1=$('.mainContent'),
    scrollDiv2=$('.sidebar');

var s=0;
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){
    if(s==0)
    {
    var evt = window.event || e;
    evt = evt.originalEvent ? evt.originalEvent : evt;             
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
    if(delta > 0) {
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()-100},'linear');
    }
    else{
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()+100},'linear');
    }
    }
    s=0;
});

scrollDiv2.bind(mousewheelevt, function(e){
    s=1;
});

To use wheel change the value of the variable mousewheelevt to :

var mousewheelevt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit + IE
          "DOMMouseScroll"; // Remaining (Previous firefox versions)

Answer 4

Take a look at this JSFiddle. It is compatible with most web browsers:

//Swap values of the below two variables if required
var scrollDiv1=$('.mainContent'),
    scrollDiv2=$('.sidebar');

var s=0;
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){
    if(s==0)
    {
    var evt = window.event || e;
    evt = evt.originalEvent ? evt.originalEvent : evt;             
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
    if(delta > 0) {
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()-100},'linear');
    }
    else{
        scrollDiv1.stop()
        .animate({scrollTop :scrollDiv1.scrollTop()+100},'linear');
    }
    }
    s=0;
});

scrollDiv2.bind(mousewheelevt, function(e){
    s=1;
});

To use wheel change the value of the variable mousewheelevt to :

var mousewheelevt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit + IE
          "DOMMouseScroll"; // Remaining (Previous firefox versions)

Answer 5

Answer №3

Thank you to everyone who took the time to provide answers. While I appreciate the responses, they did not fully solve my issue as they focused on one scrollable area only. However, the problem lies in the fact that .sidebar is not the only scrollable element; there may also be modals and other components present. One suggestion was to revamp this using the class .scrollable as recommended by @A.Wolf, but I believe I have come up with a better solution suitable for my particular situation.

Once again, I want to express my gratitude to all those who offered their input. Your responses have given me clarity on what I truly require and the actual nature of my problem.

$(window).bind('mousewheel', function (event) {
    if($(event.target).is('body')) {
        $('.mainContent').scrollTop($('.mainContent').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

This is a basic function which may need adjustments for cross-browser compatibility, as mentioned by @Zword.

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){

Before implementing this, I intend to conduct further research since Firefox's recommendation of using DOMMouseScroll has been deemed unstable in some cases. The Wheel event might be a more reliable alternative.

Answer 6

Thank you to everyone who took the time to provide answers. While I appreciate the responses, they did not fully solve my issue as they focused on one scrollable area only. However, the problem lies in the fact that .sidebar is not the only scrollable element; there may also be modals and other components present. One suggestion was to revamp this using the class .scrollable as recommended by @A.Wolf, but I believe I have come up with a better solution suitable for my particular situation.

Once again, I want to express my gratitude to all those who offered their input. Your responses have given me clarity on what I truly require and the actual nature of my problem.

$(window).bind('mousewheel', function (event) {
    if($(event.target).is('body')) {
        $('.mainContent').scrollTop($('.mainContent').scrollTop() - event.originalEvent.wheelDeltaY);
    }
});

This is a basic function which may need adjustments for cross-browser compatibility, as mentioned by @Zword.

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(window).bind(mousewheelevt, function(e){

Before implementing this, I intend to conduct further research since Firefox's recommendation of using DOMMouseScroll has been deemed unstable in some cases. The Wheel event might be a more reliable alternative.

Navigate through the div only when the other divs are not being navigated

Answer №1

Answer №2

Answer №3

Similar questions

Finding an element's id within a click event inside an iframe

unable to respond when clicking an angularjs link

Tips for creating a clickable li element that can toggle a checkmark

dynamically open ngx-bootstrap accordion panels

Determine the scrolling progress within a DOM element

AngularJS Treeview - Rearranging tree nodes

Page freezing due to JQuery scroll event

Automated driver code leads back to the original URL

Top WebSocket/Perl solution for maximum effectiveness

Using NodeJS and ExpressJS to send the HTTP request response back to the client

HTML's Nesting Buttons for Enhanced Interactivity

Monitor which image has been selected to alter the content inside

JavaScript date selector allowing the selection of multiple dates

Placing numerous meshes that are mostly alike but not exactly the same in a scene

The content in my textarea disappears once the submit button is clicked

Arranging Functions in JavaScript

JavaScript function is not being invoked when receiving PHP arguments

Font file integration with webpack implementation is smooth sailing

Exploring and Modifying CSS Styles in Element Properties

Customized CSS scrollbar within a specific div