scrollable div with fixed element inside

Question

please have a look at this jsfiddle: http://jsfiddle.net/devboell/kjFps/

I need to make a div, whose contents will overflow both horizontally and vertically. There also needs to be an element that will scroll along horizontally, but remain fixed vertically.

To explain the code:

• there is a main container div, and at first I had a single background div that is double the size of the container in x and y direction.
• the scale div is the element that should always be visible at the top of the container, but should scroll horizontally.
• my thought was to divide the background div in a backgroundHorizontal and backgroundVertical, and then position the scale absolutely in the backgroundHorizontal.
• still, when scrolling down, the backgroundVertical pushes the scale up and out of view.

There is also a further requirement, and although I don't want to ask two questions at the same time, I think I should mention it because it might influence the solution for this problem. The requirement is that the vertical scrollbar should alway be visible, and not only when you scroll all the way to the right, like it does now.

Thanks in advance!

Answer 1

I have faced the similar problem, and can say that according to specification it ia impossible to have div scrollable horizontaly, and fixed vertically at once time.

The solution I used is like: 1. set inside element position to absolue;

$.('container').on('scroll', function(){

$('.inside-element').css('left', $.('container').scrollLeft())

})