it-swarm.com.de

Blenden Sie die Bildlaufleiste der verschachtelten div aus, machen Sie sie jedoch noch scrollbar

Dies ist eine Referenz, die ich verwendet habe. Dort wird erläutert, wie ein Div-Bildlauf mit ausgeblendeter Bildlaufleiste angezeigt werden kann. Der einzige Unterschied ist, dass ich divs verschachtelt habe. Überprüfen Sie meine Geige

HTML:

<div id="main">
    <div id="sub-main">
        <div id="content">
            <div id="item-container">
                <div class="item">a</div>
                <div class="item">b</div>
                <div class="item">c</div>
            </div>
        </div>
    </div>
</div>

CSS:

#main {
    width: 500px;
    height: 500px;
}

#sub-main {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#content {
    background-color: red;
    width: 500px;
    height: 500px;
    overflow: auto;
}

#item-container {
    width: 1500px;
    height: 500px;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

Wie oben habe ich ein überlaufendes horizontales div und möchte die Bildlaufleiste ausblenden. Ich muss es noch scrollbar machen, da $.scrollTo() sonst nicht funktionieren würde.

UPDATE:

Ich habe alle Antworten gelesen, aber ich habe mein Problem immer noch nicht gelöst und weiß nicht, was es verursacht. Dies ist das Live, das Probleme hat ... Im Grunde versuche ich this fast genau das gleiche zu folgen, aber es muss einen Grund geben, dass meine Website nicht wie erwartet funktioniert. Es gibt zwei Probleme.

  1. Wenn ich overflow: hidden auf einen übergeordneten Container mit scrollbaren Elementen eingestellt habe, kann ich keinen Bildlauf durchführen (native JavaScript-Bildlauffunktionen funktionieren ebenfalls nicht).
  2. Ich möchte nur den überlaufenden Container scrollen, nicht das gesamte Fenster. Dies kann durch Festlegen eines Ziels in $.localScroll({ target: '#projects-content' }) durchgeführt werden, es wird jedoch kein Bildlauf durchgeführt, wenn ich das Ziel setze. Wenn nicht, funktioniert das Scrollen so lange, wie overflow:hidden nicht angewendet wird . Wieder wäre jede Hilfe sehr dankbar.

HTML:

<div id="projects"> <!-- start of entire projects page -->
  <div id="project-sidebar">
    <a href="#project-first">
      <div class="sidebar-item sidebar-first">first</div>
    </a>
    <a href="#project-second">
      <div class="sidebar-item sidebar-second">second</div>
    </a>
    <a href="#">
      <div class="sidebar-item sidebar-third">third</div>
    </a>
  </div>

  <div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
    <div id="project-first" class="project-item"> 
      <!-- these items should be scrollable -->
      <div class="project-subitem" id="first-sub1">
        <a href='#first-sub2' class='next'>next</a>
      </div>
      <div class='project-subitem' id='first-sub2'>
        <a href='#first-sub1' class='prev'>prev</a>
      </div>
      <!-- end of scrollable items -->
    </div>
  </div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->

<script>
  // FIXME: when I set target, nothing scrolls.
  // But I don't want the entire window to scroll
  $('#projects').localScroll({
    //target: '#project-content',
    hash: false
  });
</script>

CSS

#project-content {
  width: 80%;
  height: 100%;
  position: relative;
  float: left;
}

#project-sidebar {
  float: left;
  width: 20%;
  height: 100%;
}

.project-item {
  width: 300%;
  height: 100%;
}

.project-subitem {
  height: 100%;
  width: 33.33%;
  position: relative;
  float: left;
}

Update:

Nachdem ich overflow:scroll zu #project-content hinzugefügt habe, funktioniert das Scrollen wie erwartet. Jetzt brauche ich nur, dass Bildlaufleisten in #project-content verschwinden. Ich habe versucht, overflow:hidden zu seinem übergeordneten Element hinzuzufügen, hatte aber keinen Erfolg. Ich habe auch versucht, es zu html, body hinzuzufügen, aber dann akzeptiert das gesamte Dokument keine Bildlauffunktionen wie scrollTop().

Jede Hilfe wird sehr geschätzt!

12
Maximus S

Theorie:

Die Technik besteht darin, einen übergeordneten Container zu verwenden, der kürzer als das untergeordnete Element mit Bildlaufleiste ist. Dieses Bild zeigt, was ich meine:

Hide scollbar

Trainieren :

In Ihrem Fall empfehle ich, absolute Positionierung und einen negativen unteren Wert für #project-content zu verwenden, damit der übergeordnete Container (#projects) unten überläuft.

Der Punkt ist nun welcher negative Wert? Es sollte derselbe Wert sein wie der mit einem Scroll, aber Scrollbalken haben je nach Browser niemals die gleiche Breite. Ich schlage daher vor, einen größeren Wert anzugeben: -30px, um sicherzustellen, dass er verborgen ist. Sie müssen nur vorsichtig sein, dass Sie keine Inhalte am unteren Rand haben, die auf Bildschirmen mit dünnen Bildlaufleisten verborgen werden können.

Dies ist das CSS, das Sie Ihrer Website hinzufügen sollten:

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}
13
web-tiki

scollbars nehmen ca. 20px in Anspruch. Machen Sie also nur einen Bildlauf um mehr als 20px größer und 20px breiter und Ihre Scrollbalken werden ausgeblendet:

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

Beispiel

4
Pete

Es ist eine Art Schummeln, aber könnte man es hinter dem #content so verstecken DEMO

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}
3
Niklas

Wenn Sie alle Container kennen, die scrollbar sein können, können Sie die Bildlaufleiste mit CSS und etwas JS ausblenden. Für Webkit-basierte Browser (Safari, Google Chrome, Opera) ist es die einzige CSS-Lösung, die Bildlaufleistenbreite auf 0 festzulegen. Bei IE, Firefox und anderen Nicht-Webkit-Browsern sollten Sie die Bildlaufleistenbreite berechnen, die als negativer Rand verwendet wird. Richtig für Ihren scrollbaren Inhalt. 

Um dies zu tun, sollten Sie Ihren Inhalt mit overflow-y:scroll in div einbetten, um immer die vertikale Bildlaufleiste anzuzeigen, und diese Bildlaufleiste mit margin-right:-17px und dem übergeordneten overflow:hidden ausblenden. Beispiel ist hier . Sie müssen weder feste Breite noch Höhe einstellen.

Dies ist die Art und Weise, die in jQuery Scrollbar verwendet wird. Das Ausblenden der horizontalen Bildlaufleiste ist komplizierter und erfordert die Verarbeitung von Inhaltsänderungen, um die Containerhöhe neu zu berechnen.

3
Gromo

Die Lösung, um den Inhalt selbst mit horizontalem Bildlauf zu erstellen.

Erhöhen Sie einfach die Höhe von #main und #content.

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}
2
Samuraik

Grundsätzlich füge ich padding:0 1em 1em 0; zu dem Element hinzu, an dem es versteckt werden soll. Dadurch werden beide Bildlaufleisten ausgeblendet, wenn das übergeordnete Element Überlauf hat: hidden. tune padding-bottom oder nur padding-right, wenn nur einer von ihnen ausgeblendet werden soll.

1em ist die durchschnittliche Breite der Bildlaufleisten in den meisten Browsern: http://jsfiddle.net/5GCsJ/912/

2
G-Cyr
  1. Verwenden Sie ein Skript, um benutzerdefinierte Bildlaufleisten zu erstellen.

http://manos.malihu.gr/jquery-custom-content-scroller/

  1. Verwenden Sie dann CSS (oder ändern Sie das Skript oder ändern Sie die Skriptkonfiguration), um die benutzerdefinierten Bildlaufleisten auszublenden.
1
Pawel

Ich habe dies grob mit jQuery und Ihrem Beispiel gemacht

Überprüfen Sie diese Geige :

Ich habe einfach die Richtung des Scroll-Rads erkannt und mit jQuery die Horiz-Scroll-Leiste gedrückt

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

Es ist "grob", weil ich einige Werte wie den 500px-Betrag zum Scrollen hartcodiert habe, Sie könnten etwas Javascript schreiben, um dynamisch zu erkennen, wie viel Sie scrollen müssen. Außerdem weiß ich nicht, ob der wheelDelta-Wert für Sie und andere Benutzer +120 für aufwärts und -120 für abwärts ist.

Beachten Sie auch, dass scrolLeft () animiert werden kann, um sanftere Übergänge zu ermöglichen.

0
petsoukos