スクロールバーをサイドバーから削除する

Question

私はウェブサイトhttps://doughellmann.com/blog/で見た素晴らしいスクロールバーをエミュレートしようとしています。 （サイドバーを表示するには、955pxより大きい画面上にいる必要があります）しかし、サイドバーは固定されていて、y方向にオーバーフローするとサイドバーが表示されるので、画面には2つのスクロールバーがありますページのしかし、私はそれを望んでいません。ユーザーがサイドバーの一番下にいて、このwebisteのように自分で修正してほしい。ここに私のコードは

.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を使用してこの問題を解決することができる方法を知っています、今どのように見えるのか？

Answer 1

私はこれを行うより効率的な方法があると確信していますが、これはあなたが望むものを得ることから始めると信じています。この例では、サイドバーのidがsidebarであるとします。

windowがロードされたときに、を追加して、要素のオフセットをチェックする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ちょっとの名前を知っているけど、ちょっと燃え尽きました...あなたはそれをよりわかりやすい名前にすることができます。