1

I am trying to create a UI where whenever I hover on an element, the element specific description will be visible just adjacent to it. I somehow managed to make it work properly but now I came to know that when the elements are more then there should be scroller.

Doing the following, I get the scroller but now the description section is not moving with the scroller.

Fiddle

CSS

.wrapper {
    height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 400px;
    background-color: red;
    position: relative;
}
.viewer {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 200px;
    background-color: orange;
}
.item {
    width: 200px;
    height: 60px;
    background-color: green;
    cursor: pointer;
    outline: 1px solid black;
}
.item:hover {
    background-color: cornflowerblue;
}
.item:hover .viewer {
    display: block;
}

I am looking for a pure solution which works in modern browsers like IE10, chrome and firefox.

Mr_Green
  • 36,985
  • 43
  • 143
  • 241
  • Basically, you need to check which area is in viewport and then update that accordingly. Take a look at this: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – odedta May 19 '15 at 08:12
  • @odedta if you are suggesting me a javascript solution then FYi, I can do it by calculating the scrollTop but here I am looking for css solution. Just for learning. – Mr_Green May 19 '15 at 08:14
  • Somethings like that? http://jsfiddle.net/t8wtxf4o/1/ – odedta May 19 '15 at 08:16
  • @odedta not even close :). I actually solved everything in the provided fiddle above. it is just that when I scroll the container, the description section is not showing adjacent to the hovered element. – Mr_Green May 19 '15 at 08:18
  • This? http://jsfiddle.net/t8wtxf4o/2/ – odedta May 19 '15 at 08:22
  • @odedta no.... the description section should stretch its height to the container. – Mr_Green May 19 '15 at 08:26
  • http://jsfiddle.net/t8wtxf4o/3/ ? :P – odedta May 19 '15 at 08:27
  • @odedta scroll and check.. the description section is not visible. are you trolling me? – Mr_Green May 19 '15 at 08:28
  • No, I honestly don't understand exactly what it is you want. – odedta May 19 '15 at 08:29
  • @odedta no problem. I got the solution below. check it. – Mr_Green May 19 '15 at 08:32

1 Answers1

2

The trick is to ensure that the viewer div doesn't scroll with the rest of the items. To do this, you can add a second wrapper. The outer wrapper does not scroll, and the inner wrapper does scroll. Then, you need to make sure your absolutely positioned elements are positioned relative to the outer/non-scrolling wrapper. You can do this by removing the positioning from the inner wrapper, and instead applying it to the outer wrapper.

For example:

.wrapper {
    position: relative;
    width: 400px;
}
.wrapper-inner {
    height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: red;
}

The jsFiddle can be viewed here: https://jsfiddle.net/t8wtxf4o/4/

Christian
  • 18,825
  • 3
  • 48
  • 70