CODEWITHSUNDEEP
javascripthtmlcss
Aftab Khan
Aftab Khan

Reputation: 3923

Programmatic scroll on a div with parent with overflow-x hidden

It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.

In this scenario I am not able to programmatically scroll one of the rows. JS Fiddle: https://jsfiddle.net/w6v1xydn/5/

But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar. JS Fiddle: https://jsfiddle.net/w6v1xydn/6/

Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)

PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery

Update 1: Parent positioning doesn't seem to affect this

Upvotes: 1

Views: 2071

Answers (2)

Cornel Raiu
Cornel Raiu

Reputation: 2995

Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/

Setting the children divs to position relative like this:

#container > div {position: relative;left:0}

and then in js:

document.getElementById("row1").style.left = '-50px';

This should work

Upvotes: 0

Falle1234
Falle1234

Reputation: 5063

It works if you move

overflow-x: hidden

onto the row-class instead.

And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.

Upvotes: 1

Related Questions