scrollable DIV with CSS and JS

Question

Currently, I have a block with a scrollable div tag inside it on the left side: https://paste.pics/2b27787ffd9e5671df4d34b0b656ba2a

I want to scroll the div tag on the left side of the attached image when the mouse hovers on the right side of the attached image (brown background), how can this be done?

score 0 · Answer 1 · edited Jun 08 '21 at 17:27

0

div {
    width: 300px;
    height: 200px;
    overflow-y: scroll
}

<div></div>

without js you can able to scroll with fix height of div and css overflow property

edited Jun 08 '21 at 17:27

General Grievance

4,555
31
31
45

answered Jun 08 '21 at 10:27

sabir sam

83
1
6

score 0 · Answer 2 · answered Jun 08 '21 at 10:36

check Find mouse position relative to element to catch cursor position on your right panel

using right panel size you'll easily compute position in % if need

compute the visible box of your left panel from cursor center position and change properties scrollTop and scrollLeft of your left panel accordingly

https://developer.mozilla.org/fr/docs/Web/API/Element/scrollTop

scrollable DIV with CSS and JS

2 Answers2