Bildlaufleiste mit Überlauf ausblenden: Bildlauf aktiviert

Question

Ich muss die Bildlaufleiste auf einem Div, das Überlauf hat ausblenden: blättern; aktiviert, damit das div mit Maus und Tastatur scrollt, aber die Bildlaufleiste selbst nicht angezeigt wird.

gibt es eine Möglichkeit, dies mit CSS zu tun oder Javascript ist der Weg zu gehen?

Answer 1

Sie könnten das scrollende div in ein zweites div mit Überlauf verstecken, dann machen Sie das innere div ein wenig breiter und höher (die Anzahl kann jedoch je nach Browser variieren).

Etwas wie folgt aus:

#outer { 
    overflow:hidden; 
    width:200px; 
    height:400px; 
    border:1px solid #ccc; 
} 
#inner { 
    overflow:scroll; 
    width:217px; 
    height:417px; 
}​ 

Voll Beispiel bei http://jsfiddle.net/uB6Dg/1/.

Edit: Leider können Sie immer noch auf die Bildlaufleisten erhalten, indem Sie den Text markieren und ziehen, und es macht Polsterung usw. ein bisschen mehr Schmerz, aber anders als das denke ich Javascript ist der Weg zu gehen.

Answer 2

Sie können dies mit reinem CSS tun (zumindest in Webkit-Browsern). Sie müssen spezielle Scrollbar Pseudo-Klassen verwenden diese

::-webkit-scrollbar { 
    display: none; 
} 

Lesen Sie diese hervorragende blogpost für weitere Informationen zu erreichen.

Answer 3

Sie benötigen die Verwendung des jQuery-Plugin von dieser Seite machen http://jscrollpane.kelvinluck.com/

Answer 4

@Maloric Antwort mich in die richtige Richtung weisen, aber ich brauchte Flüssigkeit Breite, und ich wollte auch genauer auf die Breite der sein, Scrollleiste.

Hier ist eine Funktion, die die genaue Breite der Bildlaufleiste basierend auf dem, was der Browser meldet, zurückgibt.

var getWidth = function() { 
 
    var scrollDiv = document.createElement('div'), 
 
     scrollbarWidth; 
 

 
    scrollDiv.style.overflow = 'scroll'; 
 
    document.body.appendChild(scrollDiv); 
 

 
    scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
 
    
 
    document.body.removeChild(scrollDiv); 
 

 
    return scrollbarWidth; 
 
}; 
 

 
var width = getWidth(); 
 
var container = document.querySelector('.overflowing-container'); 
 

 
container.style.paddingRight = width + 'px'; 
 
container.style.marginRight = (width * -1) + 'px'; 
 

 
// Just for testing purposes 
 
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()

.container { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: 500px; 
 
} 
 

 
.overflowing-container { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    width: 100%; 
 

 
}

<div class="container"> 
 
    <div class="overflowing-container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu. 
 

 
    Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere. 
 
    </div> 
 
</div> 
 

 
<div class="scrollbar-width"></div>

Der obige Code-Schnipsel zeigt dies in Aktion.