1

我有以下html结构

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

这是解释问题的基本 jsbin。

我希望能够横向滚动#contents，但我希望它完全被一个透明元素 (#cover) 覆盖，我可以将其用于点击检测并允许更轻松地在平板电脑上进行横向滚动。

应该可以单独使用 css 来做到这一点。#cover { position:absolute,top:0,bottom:0,left:0,right:0}似乎这将是去这里的方式，因为这是我之前使用过数十次的技术，但是滚动它不会一直延伸到右侧，而只是延伸到最初可见的滚动区域的尖端。滚动时，它不再覆盖元素

这是该问题的演示。尝试滚动容器，您会发现问题。

4

4 回答 4

2

尝试将 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在内容前后设置了一个边距。无论如何，您应该对此进行调整，所以我认为这不会成为问题。

于 2013-05-09T21:10:34.677 回答
1

更新

你可以

你应该

你仍然可以完全放弃它并使用 jQuery，

例子

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;

}

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

于 2013-05-09T23:33:00.863 回答
0

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

于 2013-05-07T20:56:46.207 回答
-1

尝试这个..

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

这是你的意思吗？？

于 2013-05-07T20:51:24.163 回答