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 に答える