Wie blenden Sie die Bildlaufleiste mit JavaScript

Question

Wie kann die Bildlaufleiste ausgeblendet werden? Ich möchte dies tun, weil die Bildlaufleiste nicht schön ist.

overflow:hidden ist nicht sinnvoll, weil mein div-Element viele andere Elemente hat.

So Einstellung overflow löst nicht mein Problem.

Answer 1

Sie die Bildlaufleiste mit diesem verstecken ...

document.body.style.overflow = 'hidden'; 

... und sichtbar machen es mit diesem:

document.body.style.overflow = 'visible'; 

Allerdings muss man sich fragen, ob das wirklich ist, was Sie wollen. Bildlaufleisten werden angezeigt, damit Benutzer Objekte anzeigen können, die sich außerhalb ihrer kleinen Bildschirme befinden.

Answer 2

Sie müssen die CSS-Eigenschaft overflow verwenden, die verwaltet, was passieren soll, wenn der Inhalt eines bestimmten Elements seine Grenzen überschreitet. Wenn Sie den Wert auf hidden setzen, werden die Bildlaufleisten ausgeblendet.

overflow: hidden; 

oder

someElement.style.overflow = 'hidden'; 

Answer 3

Meine Augen weh, wenn ich Ihre Frage gelesen. Es ist jedoch nicht möglich, die Browser-Bildlaufleiste zu verbergen, ohne "overflow: hidden" (?!) zu setzen. Es ist ein Standardverhalten des Browsers.

Da Ihr div viele andere Elemente hat, warum stellen Sie nicht die richtige Breite und Höhe ein? Anderenfalls machen Sie es scrollbar, damit die Benutzer Ihren Inhalt vollständig lesen können.

Answer 4

Sie haben die CSS-Einstellungen überschrieben werden, wie folgt:

<style type="text/css"> 
    #YourSpecialDiv { overflow: hidden !important; } 
</style> 

Und die div sollten Sie die ID-Tag, dh

<div id="YourSpecialDiv"...>...</div> 

Answer 5

Der beste Weg, fügen dies zu tun wäre eine Art von Pseudo sein Element CSS-Selektor. Aber ich denke nur Webkit (Chrome/Safari) has one for the scrollbar, so ist es nicht sehr Cross-Browser.

A Hacky Alternative ist es in einem div wickeln, dass die Bildlaufleiste versteckt sich, indem die width kleiner als die enthaltenen div Einstellung von der Größe des Scrollbar

DEMO (kann eine Weile dauern die CSS perfekt zu bekommen, aber Sie erhalten das Wesentliche)

Das Problem hier ist, dass die Größe der Bildlaufleisten pro Browser variieren, so dass Sie das äußere div die größte Breite der Bildlaufleisten kleiner machen müssen. Um mit den kleineren Bildlaufleisten keinen Inhalt in den Browsern zu schneiden, empfiehlt es sich, den größten Größenunterschied für Bildlaufleisten hinzuzufügen.

Answer 6

Ich glaube nicht, dass es tatsächlich eine Möglichkeit gibt, die Bildlaufleisten einfach zu verbergen. Was overflow:hidden, overflow-x:hidden und overflow-y:hidden tun ist eigentlich "wenn es aus 100vw/100vh/100vw ein 100vh geht dann nicht anzeigen". Überlauf zeigt nur nicht an, was außerhalb der aktuellen (anfänglichen tbh) Ansicht ist.

Es blendet Scrollbar, weil alles, was im HTML ist, das draußen sein sollte, nicht auf der Seite sein wird, wenn man es anschaut (nichts, das scroll so scrollbar braucht).

Das einzige hide verfügbar ist (hier die Y-Achse Scrollbar zu verbergen):

[container]{ 
    overflow:scroll; 
    overflow-x:hidden; 
} 

[container]::-webkit-scrollbar{ 
    width:0; 
    background-color:transparent; 
} 

die ein echtes Fell Scrollbar ist und funktioniert leider nur auf Webkit-basierten Browsern.

Wenn eines Tages alle Anbieter dies akzeptieren, dann wird es erstaunlich, und wir werden endlich Scrollbalken ausblenden können.

Answer 7

var container = document.querySelectorAll("div.container")[0]; 
 
container.addEventListener("wheel", function(event) { 
 
    /*Mouse wheel scrolled down*/ 
 
    if (event.deltaY > 0) 
 
    container.scrollTop += 30; 
 

 
    /*Mouse wheel scrolled up*/ 
 
    else 
 
    container.scrollTop -= 30; 
 
}, false);

div.container { 
 
    height: 15rem; 
 
    width: 20rem; 
 
    overflow: hidden; 
 
    padding: 1rem; 
 
    border: 1px solid; 
 
    font-family: "Seoge UI", "Calibri", sans-serif; 
 
    font-size: 1.25rem; 
 
    line-height: 1.5rem; 
 
}

<div class="container"> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan. 
 
    Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales, 
 
    dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br 
 
    />diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br 
 
    />libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br 
 
    />Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum 
 
</div>

Answer 8

Sie können Folgendes auf jedem Element verwenden:

::-webkit-scrollbar { 
    width: 0px; 
} 

Source

Dies funktioniert nur auf WebKit-Browser, so dass keine IE und Firefox.