2

私がやろうとしているの.topは、固定されたブロック（それを呼び出しましょう）と別のブロック（これを呼び出しましょう）.contentを持って.topいること.topです。

今、いくつかの明白な設定があります

これ http://jsbin.com/rucifuzu/1/edit?html,css,output

またはこれ http://jsbin.com/hufomaxu/1/edit?html,css,output

両方の問題は、a) スクロールバーの幅を考慮する必要があることです。b) スクロール/スワイプしても、その下に.topある要素では何もしません。overflow: auto

私はいくつかの解決策について考えました。

最初はpointer-events: noneon.topになり、マウスイベントに対して「透明」になり、その下にあるものすべてでスクロールがトリガーされます。問題は、クリックイベントも機能しないことです.top。それは問題だ。クリック/選択可能なものだけにリセットすることもできpointer-eventsますが、それらのクリック可能なものの1つが大きなお尻の見出しになることを考えると、マウスの位置でスクロールが機能しないという問題が再び発生します。auto

overflow: auto2 つ目は、私がスクロール委譲と呼んでいるもので、JS を使用してマウスホイール イベントをキャッチし、要素の scrollTop を変更しました。これは正常に機能しますが、この委譲が行われている間と、ネイティブ スクロールの開始時にスクロールの「感触」が異なる可能性があり.contentます。また、タッチ デバイスでこの動作を正しく行うのも面倒です。

したがって、どちらも理想的ではありません。この問題に対する巧妙で簡単な解決策を見逃していませんか?

TL;DR 目標は、.top要素をクリック可能で「スクロールスルー可能」にすることです

  1. この方法.topはクリック可能ですが、その下の要素はスクロールしません- http://jsbin.com/hufomaxu/1/edit?output
  2. このようにその下の要素はスクロールしますが、.top クリックできません- http://jsbin.com/tuluwili/1/edit?output
4

1 に答える 1

1

100% 理解できません。スクロール中に固定要素を視覚的に覆い隠したいが、それでもクリックできるようにしたいですか?

単純な解決策の 1 つは、2 層ではなく 3 層を使用することです。

最下層にはリンクが含まれており、固定されています。

中間層は、それをスクロールして覆い隠す層です。

上のレイヤーは固定されており、すべての背景色をクリアし、不透明度を 0 に設定する以外は、下のレイヤーと同じです。

スクロールすると、下部が覆われているように見えますが、上部の非表示レイヤーをクリックすることはできます.

ドラッグしてテキストをコピーしたり、他の方法で中間レイヤーとやり取りしたりする必要がある場合は、機能しない可能性があります。

于 2014-04-25T21:00:34.063 に答える