How to make overflow-y scroll without changing overflow-x to auto?

Question

I know this is a duplicated question.

And below link is the answer the most nearest with my question that I've found.

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

In this link, the W3C spec says:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

What I want to know is, are there any new solution of this.

The problem of mine is in this fiddle.

I made 'sidebar' class of 'BootStrap' simple in a fiddle of mine.

overflow-x: visible;
//overflow-y: scroll;

You can see that I commented out 'overflow-y: scroll' of class '.panel' in css part.

In this case, 'hover' will work but 'scroll' won't.

When if I clear that comment out, 'hover' won't work but 'scroll' will.

What I wanna see is, 'hover' and 'scroll' working together.

Does anyone have any ways or ideas to fix this?

Or are there still no way to solve this problem?

Ankur Dubey · Accepted Answer · 2017-12-04 08:09:47Z

1

Your code is working you just can't see hover because of the width you set to that block is 50px also if you set position:absolute in hover you can see that hover effect but it overlap the child item. so one thing i want to know you want same width or you just set for a demo purpose.

answered Dec 4, 2017 at 8:09

Ankur Dubey

296 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Canet Robern Over a year ago

Thank you for your comment. I think my question did not explain of my purpose enough. You can see why this problem occurred in first answer of posted link. The answer said that it's because of

if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’

from basically css function. So what I want is another hack to solve this. :)

MHD Alaa Alhaj · Accepted Answer · 2017-12-04 08:30:46Z

1

You could use jQuery so you will change the .panel overflow depending on the event.

Absolutely you will need a little of css hacks also,

See the updated JSfiddle.

answered Dec 4, 2017 at 8:30

MHD Alaa Alhaj

3,2361 gold badge15 silver badges26 bronze badges

1 Comment

Canet Robern Over a year ago

Your solution looks beautiful! But there is a one thing that 'scroll' does not work when try to scroll on '.item'..

trk · Accepted Answer · 2017-12-04 09:22:36Z

1

I liked this question.

So, I have created a fiddle here: https://jsfiddle.net/n4tvvora/4/

Its comes pretty close to what you need (I think). Let me know if it does NOT suit your requirement. We can make it better.

Code highlights:

.panel:hover ul.list:first-child {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel ul.list:first-child {
    display: block;
}

answered Dec 4, 2017 at 9:22

trk

2,23815 silver badges21 bronze badges

2 Comments

Canet Robern Over a year ago

Thanks for your interest! :) I'd like to make scroll without expanding panel. Maybe your fiddle can help to solve my problem. I think that I just have gotten a little hint from yours. Let me try and I'll give you feedback. Thanks!

Canet Robern Over a year ago

I've posted answer to this question with solution. If you have interest, check fiddle of my answer. And thank you for your hint. :)

Canet Robern · Accepted Answer · 2017-12-07 04:53:50Z

1

I've solved this by adding 'div' between 'div' and 'ul'.

And here's my final fiddle which works almost fitting with my intent.

<div class="panel">         // added div

I hope this working will be helpful for anybody. :)

answered Dec 7, 2017 at 4:53

Canet Robern

1,0692 gold badges11 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to make overflow-y scroll without changing overflow-x to auto?

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related