Scroll div when no other div is scrolled

2
votes

I have set up jsFiddle to show what I want to achieve.

I have two divs (there can be more then two, but this is simple setup) with size of the parent window, so <body> will never scroll.

I want to bind an event listener to window.scroll so that if no other div is scrolled (nothing is scrolled) then .mainContent is scrolled.

For example if I'm scrolling on .sidebar, just scroll sidebar. But if my cursor is at the right edge and I scroll with the mouse wheel, then .mainContent should scroll, as if the body had overflow.

Do I explain it well?

My Question is how to detect if no other element is scrolled when I rotate my mouse wheel so I can scroll .mainContent in that case.

3
javascriptjqueryhtmlcssscroll
Do you want both divs to scroll on mousewheel? - Zword
Okay tell me If I got this right, You only want the div on which your cursor is, to scroll not any other, right ? - Lokesh Suthar
no, only one. and sometimes sidebar will not be scrollable, and sometimes it will. when sidebar is scrollable, scroll sidebar, but when it is not and I scroll sidebar, just scroll .mainContent. - CBeTJlu4ok
I want to detect if element I had cursor at did scroll, if not scroll .mainContent - CBeTJlu4ok
@Mpa4Hu i will try to make a fiddle frm what i have understood.check for an answer later - Zword

3 Answers

3
votes

Try this:

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

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

http://jsfiddle.net/bradleytrager/qPjs8/

2
votes

Check this fiddle.Works in most browsers:

//Swap values of the below two variables if needed
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 include wheel change variable( mousewheelevt ) value to :

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

Thanks everyone for answering. Unfortunately your answers was not enough for me because they solve problem for only one scrollable area. but .sidebar is not only scrollable and there can be modals and such things. We could remake that with class .scrollable as @A.Wolf suggested but I still think I came with better solution in my case.

Again thanks everyone for answering, this helped me to think what I really need and what my problem really is.

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

this is basic function, of course if somebody decides to use this, you need to make this cross-browser. as @Zword suggested

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

but before I wright this, I want to research a little more since Firefox suggests DOMMouseScroll is not stable too. Wheel event can be used instead.