Ausblenden der Bildlaufleiste auf einer HTML-Seite

Question

Kann man mit CSS die Bildlaufleiste ausblenden? Wie würden Sie dies tun?

Answer 1

Mein HTML-Code sieht folgendermaßen aus:

<div class="container">
  <div class="content">
  </div>
</div>

Fügen Sie dies zu Ihrem div wo Sie die Bildlaufleiste ausblenden möchten:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Und fügen Sie dem Container Folgendes hinzu

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Answer 2

Ich habe eine WebKit-Version mit einigen Optionen wie automatisches Ausblenden , kleine Version , blättern nur-y ou nur-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Answer 3

Meine Antwort wird auch dann rollen, wenn overflow:hidden; , mit jQuery:

Führen Sie zum Beispiel einen horizontalen Bildlauf mit dem Mausrad durch:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Answer 4

Um die vertikale Bildlaufleiste zu deaktivieren, fügen Sie einfach overflow-y:hidden; .

Erfahren Sie mehr darüber: Überlauf .

Answer 5

Ich glaube, Sie können es mit dem overflow CSS-Attribut, aber sie werden von den Browsern nur begrenzt unterstützt. Eine Quelle sagte, es sei Internet Explorer 5 (und später), Firefox 1.5 (und später) und Safari 3 (und später) - vielleicht genug für Ihre Zwecke.

Blättern, Blättern, Blättern hat eine gute Diskussion.