CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Canet Robern
Canet Robern

Reputation: 1069

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

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?

Upvotes: 5

Views: 4842

Answers (4)

Canet Robern
Canet Robern

Reputation: 1069

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. :)

Upvotes: 1

trk
trk

Reputation: 2228

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

Upvotes: 1

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3223

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.

Upvotes: 1

Ankur Dubey
Ankur Dubey

Reputation: 29

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.

Upvotes: 1

Related Questions