Is it somehow possible to scroll specific div without mouseenter to it

Question

I've got a 2 column layout, where left column is fixed and right column is enabled to scroll. I've set overflow: hidden; to body because I don't want to scroll body. But is it somehow possible to scroll my second column with text without directly moving cursor to it (scroll it globally by mousewhell)? Here is the fiddle: https://jsfiddle.net/ketysek/4ysm4h0f/

Is the left column ever going to have enough content to require scrolling? What about mobile support? — seemly, Dec 08 '16 at 08:41
Content in left column doesn't require scrolling :) On mobiles there's no 2 columns (left is on the top), so scrolling on body is enabled. — ketysek, Dec 08 '16 at 08:49

score 2 · Answer 1 · answered Dec 08 '16 at 09:12

@Fission answer is correct.

This answer is for old browsers support.

if (document.body.addEventListener) {
    document.body.addEventListener("mousewheel", MouseWheelHandler, false);
    document.body.addEventListener("DOMMouseScroll", 
                                    MouseWheelHandler, false);
}

else document.body.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
    var right= document.getElementsByClassName("right")[0];
    var e = window.event || e; // old IE support
    right.scrollTop += e.deltaY * 5;
}

score 1 · Accepted Answer · answered Dec 08 '16 at 08:49

1

You can bind an onwheel event to the left column and scroll the right column instead. Check the updated fiddle here.

document.getElementsByClassName('left')[0].onwheel = function(event) {
  document.getElementsByClassName('right')[0].scrollTop += 10 * event.deltaY;
}

answered Dec 08 '16 at 08:49

Fissio

3,748
16
31

Wow, this is exactly what I need :) – ketysek Dec 08 '16 at 08:50

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

basically i think you cant do this thing smoothly, but if i try to be creative you can assign "wheel" event to the body of the page , and add anchor inside your text you want to be scrolled, and inside the function that take care of the wheel event move to that anchor.

to recognized wheel direction read this : Javascript - Detecting scroll direction

edited May 23 '17 at 12:08

Community

1
1

answered Dec 08 '16 at 09:01

Developer

460
4
17

Is it somehow possible to scroll specific div without mouseenter to it

3 Answers3