Переместить div с полосой прокрутки внутри фиксированного div

Question

У меня есть div на моей странице (назовем его div A), который равен position:fixed, и все в порядке. Однако внутри этого div у меня есть несколько других div (давайте назовем их divs 1, 2 & 3), которые я хочу переместить, поскольку посетитель использует полосу прокрутки.

Как я могу определить divs 1, 2 & 3, чтобы следовать за полосой прокрутки?

HTML:

<section class="block"> 
    <div class="full-width blue"> 
    </div> 

    <div class="full-width green"> 
    </div> 

    <div class="full-width orange"> 
    </div> 
</section> 

CSS:

.block{ 
    width: 300px; 
    height: 104px; 
    position: fixed; 
    left: 1em; 
    top: 1em; 
    z-index: 999; 
} 

.full-width класс просто рассказывает дивы запустить полную ширину своего контейнера.

Answer 1

Нечто подобное ?:

HTML

<section class="block"> 
    <div class="full-width blue"> 
    </div> 

    <div class="full-width green"> 
    </div> 

    <div class="full-width orange"> 
    </div> 
</section> 

CSS

.block{ 
    width: 300px; 
    height: 104px; 
    position: fixed; 
    left: 1em; 
    top: 1em; 
    z-index: 999; 
    background-color: #CCC; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 

} 
.full-width { 
    display: inline-block; 
    width: 300px; 
    height: 104px; 
} 
.blue { 
    background-color: #00CCFF; 
} 
.green { 
    background-color: #CCFF00; 
} 
.orange { 
    background-color: #FFCC00; 
} 

http://jsfiddle.net/rmy6g8v2/

Или как это ?:

Я слегка модифицировал скрипку, поставляемого @deebs

http://jsfiddle.net/0h6fuyb2/1/

Answer 2

U должен использовать overflow:scroll;, чтобы включить все div внутри обертки с свойством прокрутки. Проверьте эту ссылку jsfiddle, чтобы увидеть пример работы.

Если и не хочет видеть скроллбар, это еще одно решения jsfiddle

Надеется, что это полезно!

Answer 3

Что делать, если вы делаете что-то вроде этого, чтобы получить scrollheight затем совпасть CSS из цветных див, или даже контейнер оборачивать эти дивы с этим scrollheight:

$(document).ready(function() { 
    window.onscroll = scrollFunction; 
    function scrollFunction() { 
     var doc = document.documentElement, body = document.body; 
     var top = (doc && doc.scrollTop || body && body.scrollTop || 0); 
     $('.blue').css("margin-top", top) 
    } 
}); 

ПЕРЕСМОТРЕННОМУ КОД

Я сделал fiddle, но я не уверен, что это «соответствие прокрутки», которое вы хотите.