1

Pinterestや9gagの高速バージョンのようなサイトはどのようにこれを行いますか？

Pinterestで画像をクリックしてモーダルを取得すると、ページの任意の場所をスクロールすると、メインドキュメントではなくモーダルがスクロールすることに気付くでしょう。

9gagでは、コメントセクション以外の場所をスクロールすると、左側のメインコンテンツ領域がスクロールします。

どちらの場合も、スクロールしたい領域に集中する必要はありません。スクロールしたい領域内にマウスがない場合でも、どこかをスクロールするだけで、その領域がスクロールされます。

彼らはどのようにこれを達成しますか？たとえば、メインドキュメントのスクロールを無効にして、ページ上のdivをその場所でスクロールさせるにはどうすればよいでしょうか。

4

2 に答える 2

1

Pinterestでは、モーダルが開くと、「noscroll」のクラスが：に追加されます<body/>。

.noscroll {overflow: hidden !important;}

これにより、bodyがスクロールできなくなります。モーダル自体のIDは「zoomscroll」で、これには次のものが含まれます。

overflow-y: scroll;

したがって、bodyがフリーズしている間、のオーバーフローを#zoomscrollスクロールできます。

こちらのデモをご覧ください：http：//jsbin.com/ucacon/2/edit —段落をクリックして本文をフリーズし、段落自体のスクロールを有効にします。

于 2012-05-10T02:00:51.083 に答える
0

これは、モーダルにある実際の CSS です。

#zoomScroll {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    background-color: rgba(255, 255, 255, 0);
    overflow-x: auto;
    -y: scroll;
    -webkit-perspective: 1000;
}

それに加えて、ボディクラスの noscroll が機能します。

.noscroll {overflow: hidden !important;}
于 2012-05-10T02:13:05.100 に答える