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

尝试将 div 的内容设置为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

更新

你可以

你应该

你仍然可以，totally drop that and use jQuery，

Example

js

$(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;

}

很抱歉，这应该像宣传的那样工作。

Answer 3

给你http://jsbin.com/oquguh/1/edit，我让你的#container div 负责处理滚动。

Answer 4

试试这个..

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

这是你的意思吗？