在 position 固定元素頂部滾動不滾動容器

Question

我有一個問題，無法在帶有溢出的容器內的 position 固定元素上滾動：滾動。

.container {overflow: scroll; height: 200px;}
.right {position: fixed;}
.left {height: 2000px;}

考慮這個例子： jsfiddle 。

如果滾動容器內的任何位置，頁面就會滾動。 但是，如果使用 cursor 在固定元素頂部滾動（內容右固定），則容器不會滾動。

有任何想法嗎？

編輯

我還需要能夠單擊固定內容，因為它是返回上一頁的按鈕。 因此， z-index: -1; 不會工作。

編輯編輯

我找到了解決方案。 通過使用jQuery 鼠標滾輪並基於右側 class 的鼠標滾輪 function 為容器滾動，它工作得很好。 請參閱更新的jsfiddle ，jQuery 鼠標滾輪直接包含在 js 中。

Answer 1

設置為position: fixed或position: absolute的元素不再被視為在其父容器內。

當鼠標光標位於fixed元素上方時，它試圖在最外層的文檔上滾動，該文檔不夠高需要滾動。

如果您將 CodePen 的輸出部分的大小調整為短於您當前在那里的內容的高度，然后嘗試在fixed元素的頂部滾動，您將看到我在說什么。

Answer 2

這是預期的行為 - 但您可以通過向其添加z-index: -1來解決此問題，將其按堆疊順序推到container的right 。 但是您將無法點擊right的鏈接。

請參閱下面的演示：

 .container { overflow: scroll; float: left; width: 100%; height: 200px; } .left, .right { float: left; } .left { width: 60%; height: 2000px; border: 3px solid blue; } .right { width: 40%; position: fixed; border: 3px solid red; left: 60%; z-index: -1; }

 <div class="container"> <div class="left"> content left </div> <a href="#" class="right"> content right fixed </a> </div>

Answer 3

對於位置固定元素需要添加

pointer-events: none

在 chrome 和 mozilla 上測試