Wie richte ich die Browser-Bildlaufleiste ein, um einen Teil einer Seite zu scrollen?

Ich habe dies in ein paar Websites getan, ein Beispiel ist artofadambetts.com. Die Bildlaufleiste auf der Seite scrollt nur ein Element der Seite, nicht die gesamte Seite. Ich schaute auf die Quelle und konnte es noch nicht herausfinden. Wie wird das gemacht?Wie richte ich die Browser-Bildlaufleiste ein, um einen Teil einer Seite zu scrollen?

<div style="overflow-x: auto; overflow-y: auto;>the content</div>

Wenn Sie nur eine horizontale oder vertikale Bildlaufleiste wollen, nur verwenden, je nachdem, welcher der Überlauf-x und Überlauf-y Sie brauchen:

Quelle

2008-09-17 airportyh

Die ziemlich raffinierte ist. Er verwendet "position: fixed" für die meisten Divs, und derjenige, der scrollt, ist derjenige, der ihn nicht hat.

Quelle

2008-09-17 13:35:06

-3

Um Bildlaufleisten an einem Element wie zum Beispiel ein div zu setzen.

Quelle

2008-09-17 13:34:41

Für ein div, können Sie in der cSS

overflow: auto

Zum Beispiel

 
<div style="overflow:auto; height: 500px">Some really long text</div>

Bearbeiten hinzu: Nach einem Blick auf die Website, die Sie geschrieben, Sie wahrscheinlich das nicht wollen. Was er auf seiner Website macht, ist das Layout als fest (Position: fixed) und weist ihm einen höheren Z-Index zu als der Text, der niedrigerer Z-Index ist.

Zum Beispiel:

 
<div class="highz"> //Put random stuff here. it'll be fixed </div> 
<div class="lowz"> Put stuff here you want to scroll and position it.</div>

mit CSS-Datei

div.highz {position: fixed; z-index: 2;} 
div.lowz {position: fixed; z-index: 1;}

Quelle

2008-09-17 13:35:01 apandit

Dies kann in CSS mit der "Position: absolute;" Hier Klausel

ist ein Beispiel Vorlage:

http://www.demusdesign.com/bipolar/index.html

Von http://www.demusdesign.com/

Quelle

2008-09-17 13:35:48 Cetra

Der Browser ist Scrollen der Seite, es ist nur, dass ein Teil davon in Position fixiert ist.

Dies geschieht, indem Sie die CSS-Eigenschaft "position: fixed" für den Teil verwenden, den Sie nicht scrollen möchten.

Quelle

2008-09-17 13:36:21

Sie haben die seitlichen und oberen Elemente auf Positionen über CSS festgelegt haben (siehe Linie 94 ihrer style.css-Datei). Dies hält sie im Ansichtsfenster, während der Rest scrollt.

Quelle

2008-09-17 13:36:45 Buzz

Tatsächlich ist es nicht der Scrollteil, der "die Arbeit macht", sondern der feste Teil der Seite.

Um dies zu tun, sollten Sie CSS und position: fixed; Eigenschaft hinzufügen (verwenden Sie es mit top, bottom, left und/oder right Eigenschaften) auf die Elemente, die Sie nicht wollen, zu blättern.

Und Sie sollten nicht vergessen, ihnen eine größere z-index zu geben, wenn Sie nicht einige der Scroll-Elemente, die über Ihre festen Element gehen können, wie Sie scrollen können (und Sie sicherlich nicht wollen, dass).

Quelle

2008-09-17 13:38:07 p4bl0

Um herauszufinden, wie Menschen diese Art von Dingen in CSS tun und/oder Javascript das Tool Firebug ist einfach hervorragend:

Firebug addon for Firefox

Quelle

2008-09-17 13:40:48

Es sollte beachtet werden, dass ohne further hacks Position nicht für IE6 fixiert funktioniert , die immer noch 15-30% des Marktes halten kann, abhängig von Ihrer Site.

Quelle

2008-09-17 13:42:39

Guten Punkt zum Scrollen. Die Seite funktioniert nicht in IE 6. – airportyh

Sie können feste Positionierung oder absolute Positionierung verwenden, um verschiedene Elemente an festen Positionen auf der Seite zu binden. Alternativ können Sie ein Element fester Größe (z. B. ein DIV) angeben und overflow: scroll verwenden, um die Bildlaufleisten darauf zu erzwingen.

Wie bereits erwähnt, erfordert alles, um in Internet Explorer und Firefox/Opera/Safari zu arbeiten, eine umsichtige Verwendung von Hacks.

Quelle

2008-09-17 13:46:25

diesen Versuchen Sie, einen bestimmten Teil der Web-Seite ......

<html> 
     <head> 
     <title>Separately Scrolled Area Demo</title> 
     </head> 
      <body> 
       <div style="width: 100px; border-style: solid"> 

      <div style="overflow: auto; width: 100px; height: 100px"> 
         sumit.................. 
         amit................... 
         mrinal................. 
         nitesh................ 
         maneesh................ 
         raghav................... 
         hitesh................... 
         deshpande................ 
         sidarth.................... 
         mayank..................... 
         santanu.................... 
         sahil...................... 
         malhan..................... 
         rajib..................... 
         </div> 
         </div> 
        </body> 
     </html>

Quelle

2011-11-29 07:00:55

Wie richte ich die Browser-Bildlaufleiste ein, um einen Teil einer Seite zu scrollen?

Antwort

Verwandte Themen