從邊欄刪除滾動條

我試圖效仿我在網站https://doughellmann.com/blog/上看到的漂亮的滾動條。（您必須位於大於955px的屏幕上才能查看邊欄）但是，我的邊欄是固定的，如果它在y方向上溢出，會在屏幕上出現邊欄，因此您有兩個滾動條 - 一個邊欄和另一個爲頁面。但是，我不想那樣。我希望用戶能夠進入側欄的底部，然後像在此網站上那樣自行修復它。這裏是我的代碼看起來現在從邊欄刪除滾動條

.sidebar{ 
    display: block; 
    background-color: #1056b1; 
    width: 30%; 
    height: 100%; 
    position: fixed; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    overflow-y: scroll; 
    } 

.content-on-the-right{ 
    margin-left: 31%; 
    }

有誰知道我如何能使用香草JavaScript或reactjs甚至CSS如果可能的解決這個問題？

來源

2017-07-27 alpha787

說實話，這是一個奇怪的行爲...您需要隱藏邊欄上的溢出，並通過編程方式滾動內容來改變Y位置或包含邊欄內容的子頁邊距。但是因爲SO不是一個免費的編程服務，所以試試吧，到目前爲止您已經嘗試發佈（您需要一些JS），然後我們可以幫助解決剩下的問題 – Capsule

我相信有一個更有效的方法來做到這一點，但我相信這會讓你開始得到你想要的。對於這個例子，假設你的側邊欄有id的sidebar。

加載window時，您可以添加一個EventListener，它將調用function來檢查元素偏移量。你可以把它從那裏：

window.addEventListener("scroll", DoScroll, false); 

function DoScroll() { 
    var sidebar = document.getElementById('sidebar'); 
    var sidebarHeight = document.getElementById('sidebar').offsetHeight; 
    var winHeight = window.innerHeight; 

    var offset = sidebarHeight - window.pageYOffset; 

    if (offset < winHeight) { 
    sidebar.style.position = "fixed"; 
    sidebar.style.bottom = 0; 
    } else { 
    sidebar.style.position = "static"; 
    } 

}

這裏是我的JSFiddle該演示這一點。

P.S.我知道function的名字有點糟糕，但有點被燒燬......你可以給它一個更具描述性的名字。

來源

2017-07-28 00:47:58

從邊欄刪除滾動條

回答

相關問題