CODEWITHSUNDEEP
javascriptcss
ketysek
ketysek

Reputation: 1219

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

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/

Upvotes: 0

Views: 196

Answers (3)

Faouzi Oudouh
Faouzi Oudouh

Reputation: 820

@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;
}

Upvotes: 2

Developer
Developer

Reputation: 428

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

Upvotes: 0

Fissio
Fissio

Reputation: 3758

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;
}

Upvotes: 1

Related Questions