我目前有兩個div並排。在頁面加載時,左側div需要佔據窗口高度的100%,並且具有垂直中心內容。正確的div的內容將會更長,並且需要滾動。在正確的div完全滾動的時候,我希望身體開始滾動以顯示兩個div下方的內容。在滾動主體前強制滾動一個div
這個工作正常,當光標在右邊的div上,但是當在左邊的div上,然後滾動而不是正確的divs內容。我可以使用CSS強制滾動正確的div,然後進行滾動,或者這是js的工作嗎?
**剛剛意識到,當試圖再次滾動備份時,您遇到了困難,您在右側div上的滾動卡住了。呻吟。我在想,我真正需要的是將左邊的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>
所有建議的歡迎,已經發現適合我想要什麼很類似的問題,但沒有。
@ WF4感謝大家對此有何迴應。我想我沒有很好地解釋它,在學校結束的時候,一個棍子格是真正需要得到'凹凸效果'效果的東西。我發現了一個有用的粘性div的例子,但我正在與寬度問題掙扎,所以發佈了一個新問題。如果可能,請嘗試刪除這一個。 –