Scrollbars aus der Seitenleiste entfernen

Ich versuche, eine nette Bildlaufleiste zu emulieren, die ich auf der Website https://doughellmann.com/blog/ sah. (Sie müssen auf einem Bildschirm größer als 955px sein, um die Seitenleiste anzuzeigen) Allerdings ist meine Seitenleiste festgelegt und wenn es in der y-Richtung überläuft ein Seitenbalken so auf dem Bildschirm haben Sie zwei Bildlaufleisten - eine für die Seitenleiste und die andere für die Seite. Das will ich aber nicht. Ich möchte, dass der Benutzer den Rand der Seitenleiste durchsucht und dann selbst wie auf dieser Website repariert. Hier ist, wie mein Code jetzt jemandScrollbars aus der Seitenleiste entfernen

.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%; 
    }

Weiß sieht, wie ich dieses Problem Vanille mit lösen könnte JavaScript oder reactjs oder auch CSS wenn das möglich ist?

Quelle

2017-07-27 alpha787

Um ehrlich zu sein, ist das ein seltsames Verhalten ... Sie müssen den Überlauf in der Seitenleiste ausblenden und den Inhalt programmgesteuert durch Ändern der Y-Position oder des oberen Rands des untergeordneten Elements, das den Inhalt der Seitenleiste enthält, scrollen. Aber da SO kein kostenloser Programmierungsdienst ist, versuchen Sie es, schreiben Sie so weit (Sie brauchen JS) und wir können Ihnen helfen, die verbleibenden Probleme zu lösen – Capsule

Ich bin mir sicher, dass es eine effizientere Möglichkeit gibt, dies zu tun, aber ich glaube, das wird dich dazu bringen, das zu bekommen, was du willst. In diesem Beispiel nehmen wir an, Ihre Seitenleiste hat eine id von sidebar.

Wenn die window lädt, können Sie eine EventListener hinzufügen, die eine function aufrufen wird, die die Elemente Offsets überprüft. Sie können es von dort:

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"; 
    } 

}

Hier meine JSFiddle ist, die diese Demos.

P.S. Ich kenne den Namen der function irgendwie saugt aber bin ein bisschen ausgebrannt ... Sie können es einen aussagekräftigeren Namen geben.

Quelle

2017-07-28 00:47:58

Scrollbars aus der Seitenleiste entfernen

Antwort

Verwandte Themen