Wie kann ich horizontal scrollen, nur für eine Reihe von Bildern und zeigen überlauf, ohne horizontal scrollen der rest der Seite?

Ich habe eine Seite mit einem Körper, der 960px breit und ich habe eine Reihe von Bildern, die ich will überlauf aus der rechten Seite der Seite, und damit für die Anzeige der übergelaufen Bilder und horizontal scrollen. Ich will nicht die Seite als ganzes horizontal zu scrollen, nur, dass element.

Ist es relativ einfach, um das horizontale scrollen zu arbeiten, aber ich kann nicht den überlauf Bilder zu zeigen, ohne auch die Erhöhung der Breite der gesamten Seite (und, daher, dass die Seite horizontal zu scrollen).

Mein CSS:

container{
  width:960px;
  margin: 0 auto;
  }

.pic-container {
  white-space:nowrap; 
  overflow:scroll;
  }

Mein (vereinfachter) HTML:

<body>
<container>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</container>
</body>

Hier ist ein kleines Diagramm, was ich Suche:

Wie kann ich horizontal scrollen, nur für eine Reihe von Bildern und zeigen überlauf, ohne horizontal scrollen der rest der Seite?

  • Sind Sie bereit, javascript zu verwenden? Es gibt viele plugins die es gibt, die genau dieses Ding, und es sieht ein wenig schöner, ohne die Bildlaufleiste.
  • Hier ist eine Jquery Lösung das tun könnten, was Sie wollen. Und hier ist ein weiteres. Aber es klingt wie Sie wollen, dass der Begrenzungsrahmen der Bilder zu erweitern, auf unbestimmte Zeit, mit ein wenig scrollbar, dass die Folien den Inhalt der ihn um...so dass weder von diesen qualifizieren, denke ich.
  • Völlig bereit, javascript zu verwenden, aber leider jmeas, weder das eine noch das sind was ich Suche.
  • Vielleicht, ich werde nur noch die Abfrage der Fenstergröße und die Breite der pic-Reihe, div, um es anzupassen. Aber das scheint ziemlich ineffizient...
InformationsquelleAutor Matt Martin | 2012-10-30
  1. 2

    Diese könnten tun, was Sie suchen (sehen Sie auf JSFiddle hier):

    <section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>​

    CSS:

    body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}​

    Was wir tun, ist das ausblenden der überlauf des body, die verhindert, dass der horizontale Scrollbalken, auch wenn die Seite nicht breit genug, alles zu zeigen. Dann machen Sie es zeigen, den Scrollbalken auf dem container div mit einer Breite festlegen (vermutlich die Breite des Dokuments) und stellen die Inhalte in die div so weit wie Sie wollen.

    Anderen Implementierung, die nur legt die Breite des section statt der body, kann hier eingesehen werden.

    • In der Nähe, aber in Ihrer Lösung nur bringt mich soweit, was ich bereits hatte. Das ist der überlauf Bilder sind noch nicht sichtbar außerhalb der Breite des Containers. Ich möchte den überlauf zu werden Bilder sichtbar, ohne Unordnung mit der Breite der Seite. Ist das sinnvoll?
    • hmmm...vielleicht. Willst du scrollen? Wenn Sie die überlauf-Bilder sichtbar außerhalb der Breite des Containers, dann scheint unvereinbar mit einer Bildlaufleiste lassen Sie Sie alle sehen.
    • Oder ist es, dass Sie suchen für die position der Bilder, die sind alle immer sichtbar, um nach Links und rechts scrollen?
    • Zweite. Es ist im wesentlichen eine Vorschau von dem, was kommen würde, um in das viewport... Art. Ich wünschte, ich könnte ein gutes Beispiel finden online irgendwo, ich weiß ich habe es vorher gesehen. Mit jquery ist das auch kein problem, wenn es sein muss.
    • fun fact, das nur für mich gearbeitet, wenn ich entfernt das float:left auf meine Bilder und Ihnen angezeigt, wie inline-block.
    InformationsquelleAutor jamesplease
  2. 1

    Ich konnte nicht herausfinden, ein Weg, dies zu tun mit nur html + css so lehnte ich mich an JQuery. Das funktioniert wunderbar, und es baut schön auch — wenn kein javascript, die Bilder sind immer noch Scrollbar sein soll, Sie einfach nicht Bluten in den rechten Rand (die '.pic-container " div standardmäßig hat keine Breite, bis die js fügt es in).

    //Update pic-container width
function picWidth() {
  win = $(document).width();
  width = String( Math.round(((win-960)/2) + 960) );

  $('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();
    InformationsquelleAutor Matt Martin
Schreibe einen Kommentar