4

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?

Canet Robern
  • 1,049
  • 2
  • 11
  • 28

4 Answers4

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.

Ankur Dubey
  • 29
  • 6
  • 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. :) – Canet Robern Dec 04 '17 at 08:17
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.

Mhd Alaa Alhaj
  • 2,438
  • 1
  • 11
  • 18
  • Your solution looks beautiful! But there is a one thing that 'scroll' does not work when try to scroll on '.item'.. – Canet Robern Dec 04 '17 at 08:36
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;
}
trk
  • 2,106
  • 14
  • 20
  • 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 Dec 04 '17 at 09:31
  • 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 Dec 07 '17 at 04:55
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. :)

Canet Robern
  • 1,049
  • 2
  • 11
  • 28