CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
CBeTJlu4ok
CBeTJlu4ok

Reputation: 1112

Scroll div when no other div is scrolled

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.

Upvotes: 2

Views: 224

Answers (3)

Zword
Zword

Reputation: 6793

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)

Upvotes: 2

CBeTJlu4ok
CBeTJlu4ok

Reputation: 1112

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.

Upvotes: 0

Bradley Trager
Bradley Trager

Reputation: 3590

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/

Upvotes: 3

Related Questions