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，然后使用psuedo元素生成封面：

演示：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;
}

这是你的意思吗？

CSS - 在滚动区域内的另一个位置元素

4 个答案: