CSS - позиция элемента над другим внутри области прокрутки

Question

У меня есть следующие HTML структуры

<div id="scrolling-container"> 
    <div id="cover"></div> 
    <div id="contents"> 
     A variable amount of iframes 
    </div> 
</div> 

Here is the base jsbin explaining the issue.

Я хотел бы быть в состоянии сторону прокрутки #contents, но я хочу, чтобы это было покрыто полностью прозрачным элементом (#cover), который я могу использовать для обнаружения кликов и обеспечения более простой боковой прокрутки на планшете.

Должно быть возможно сделать это только с помощью css. #cover { position:absolute,top:0,bottom:0,left:0,right:0} похоже, что это был бы способ пойти сюда, поскольку это техника, которую я использовал десятки раз раньше, но с прокруткой она не растягивается полностью вправо, а скорее на кончик первоначально видимой области прокрутки , По мере прокрутки он больше не охватывает элементы

Here is a demonstration of the issue. Попробуйте прокрутить контейнер, и вы увидите проблему.

Answer 1

Попробуйте установить содержимое дел до position: relative, а затем с помощью псевдо элемента для создания обложки:

Демо: http://jsbin.com/arajag/1/edit

CSS:

div { 
    border: 1px solid grey; 
} 

#scrolling-container { 
    overflow-x: scroll; 
    position: relative; 
} 
#contents { 
    width: 400em; 
    height: 10em; 
    position: relative; 
} 

#contents:after { 
    content: " "; 
    position: absolute; 
    z-index: 100; 
    background-color: blue; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
} 

HTML: Удалить #cover

Я знаю, что есть пробел выше и ниже крышки, потому что Chrome устанавливает маржу до и после содержимого. Вы должны приспособиться к этому, так что я не думаю, что это будет проблемой.

Answer 2

Попробуйте это ..

#cover { 
    width: 400em; 
    height: 20em; 
    position: absolute; 
    z-index: 100; 
    background-color: blue; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

Это то, что вы имели в виду ??

Answer 3

Здесь вы идете http://jsbin.com/oquguh/1/edit, я сделал ваш #container div тем, кто обрабатывает прокрутку.

Answer 4

Update

Вы могли

Вы должны

Вы все еще можете, totally drop that and use jQuery,

Example

J s

$(document).ready(function() { 
    var x = $('#contents').width(); 
    $('#cover').width(x); 
}); 

$(window).resize(function() { 
    var x = $('#contents').width(); 
    $('#cover').width(x); 
}); 

$('#scrolling-container').scroll(function() { 
    var x = $('#contents').width(); 
    $('#cover').width(x); 
}); 

CSS

div { 
    border: 1px solid grey; 
} 

#scrolling-container { 
    overflow-x: scroll; 
    position: relative; 
} 
#contents { 
    width: 4000em; 
    height: 10em; 
} 

#cover { 
    position: absolute; 
    z-index: 100; 
    top:0; 
    bottom:0; 
    background-color: blue; 

} 

К сожалению о том, что это должно работать, как рекламируется.