Scrollable div inside fixed div

Question

I have a div .div-wrapper inside position: fixed div .div-header. Now I want to scroll this div with jQuery.

I have almost working solution below, but it is so ugly(with width: 5000%) that I can't stop myself from finding better way to do this.

Is there a way to achieve the same effect without having width: 5000%?

HTML:

<div class="div-header">
    <div class="div-wrapper">
        <div class="div-long">
            Some wide content...
        </div>
    </div>
</div>

CSS:

.div-header {
    position: fixed;
    left: 15px;
    right: 100px;
    top: 20px;
}
.div-wrapper {
    overflow: hidden;
    height: 57px;
}
.div-long {
    width: 5000%;
}

jsFiddle: http://jsfiddle.net/pyzk27xj/6/

Thanks in advance!

The question is not really about scrolling a div, but about how to keep the inner `div`s in the same line without specifying the `width` of the container. Therefore the answer would be: http://stackoverflow.com/questions/25989240/aligning-side-by-side-in-a-modal/25989296#25989296 ♦ http://stackoverflow.com/questions/25621482/keep-inner-divs-on-same-line-though-inner-div-width-is-greater-than-100/25621520#25621520 — Hashem Qolami, Oct 11 '14 at 09:05

score 0 · Answer 1 · answered Oct 11 '14 at 11:14

0

Take a look at this document: https://developer.tizen.org/dev-guide/2.2.0/?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm

I believe it has the answer you need!

answered Oct 11 '14 at 11:14

Miguel

310
1
5
17

Scrollable div inside fixed div

1 Answers1