-1
私は現在、2つのdivsを並べています。ページの読み込み時に、左側のdivはウィンドウの高さの100％を占める必要があり、垂直方向の中央のコンテンツを持つ必要があります。右のdivの内容は長くなり、スクロールが必要になります。右のdivが完全にスクロールされたら、両方のdivの下のコンテンツを表示するように本文をスクロールしてください。本文をスクロールする前にdivの強制スクロール
カーソルが右のdivにあるときはうまく動作しますが、左のdivの上にあるときは、右のdivの内容ではなく本文がスクロールします。ボディスクロールの前に右のdivのスクロールを強制するためにCSSを使うことはできますか？これはjsの仕事ですか？
**もう一度スクロールして右のdivにスクロールしてしまうと、醜い状況が発生することがわかりました。 GROAN。私は実際に必要なのは、左のdivをスクロールに貼り付け、コンテナの最後に放すことだと思っています。これに最適なソリューションは何ですか？ **
私が望むように動作するjQuery Stickemを使用して、スティッキdivを見始めましたが、もっと簡単に確実に達成できることはおそらく残念です。私は解決策は、すべてのアドバイス歓迎IE8 +
.top-content {position:relative; height:100vh}
.left-div {background-color:blue; float:left; width:35%; height:100%;}
.right-div {background-color:yellow; float:right; width:65%; height:100%; overflow:scroll;}
.bottom-contet {position:relative; background-color:pink; height:500px;}<div class="top-content">
\t <div class="left-div">Currently, if the cursor is over the right div the page works as required. But if over this left div then the body scrolls straight to content below. I want it to always scoll the right div regardless of cursor position</div> \t
<div class="right-div">
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t <p>scrolling right stuff</p>
\t </div>
</div>
<div class="bottom-contet">
\t \t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
\t <p>content below</p>
</div>を含むすべてのブラウザで動作しなければならない必要が
は、私が欲しい、非常にどのようなフィット同様の質問が、どれを発見しました。
この上のご回答ありがとうございました。私はそれを正しく説明していなかったと思いますが、スティック部門は実際に学校が終了したときに「バンプ」効果を得るために必要なものでした。私は役に立つsticky divの例を見つけましたが、幅の問題で苦労しているので、新しい質問が投稿されました。可能であれば、これを試して削除します。 –