Wie Scroll für bestimmte div aktivieren und Scroll für Seite deaktivieren

Ist es möglich, Scroll für die Seite zu deaktivieren, und nur für eine bestimmte div innerhalb der Seite aktivieren?Wie Scroll für bestimmte div aktivieren und Scroll für Seite deaktivieren

Quelle

2013-08-23 Caspert

Es ist ok eine CSS-Lösung?

Wenn dies der Fall ist, fügen Sie einfach overflow: body und overflow: auto zum scrollbaren div hinzu.

body { 
    overflow: hidden; 
} 

#scroller { 
    overflow: auto; 
    height: 100px; 
}

Example

Quelle

2013-08-23 20:24:25 patrick

Absolut, css wäre großartig. Ich habe Ihren Code versucht, es funktioniert, aber die Bildlaufleiste ist nach dem Inhalt versteckt. Außerdem sind einige Elemente im div # scroller nicht vollständig sichtbar. – Caspert

was meinst du mit der scrollbar ist nach dem inhalt versteckt? – patrick

Die Browser Scrollbar ist nach dem Inhalt, so kann ich es nicht mehr verwenden .. @patrick – Caspert

deaktivieren verwenden:

css

.disableScroll{ 
     overflow-y:hidden; 
     overflow-x:hidden; 
}

hinzufügen <body class="disableScroll"> nur auf das Sperr

Inline-Stil<body style="overflow:hidden">

für div, lassen Scrollen aktiviert <div style="overflow:auto;">

Beachten Sie, dass Sie Überlauf-y für vertikale Scroll-und Überlauf-x für die horizontale Scroll-Eigenschaften

Quelle

2013-08-23 20:27:09 Tatarin

warum nicht einfach 'overflow: versteckt' statt overflow-x und y? –

@Harsh, um mehr Flexibilität zu geben, wenn er vertikal vs horizontal deaktivieren möchte – Tatarin

für ganze Seite verwenden können:

body { 
    height: 100%; 
    width: 100%; 
}

für div zum Beispiel:

div.scroll { 
    width:180px; 
    height:170px; 
    overflow:auto; 

}

in html:

<div class='scroll'></div>

Quelle

2013-08-23 20:27:55

Stellen Sie sicher, dass die BODY und HTML-Tags keine Auffüllung und Rand haben, sonst 'width: 100%;' und 'height: 100%' würde die Kanten schieben außerhalb der Grenzen und erstellen Sie Rollbalken sowieso. – Broxzier

Hallo @ArtsiomMitrokhin Ich habe Ihre Codes ausprobiert. Es funktioniert, aber wenn ich oben oder unten erreiche, werden Sie sehen, dass Sie scrollen können.Nur unten und oben, wenn Sie den unteren Teil des Inhaltsbereichs mit der Klasse scroll erreichen. – Caspert

HTML:

<div class="scrollDisable"></div>

CSS:

.scrollDisable{ 
    overflow-y:hidden; 
    overflow-x:hidden;

}

Für ganze Seite:

body { 
    height: 100%; 
    width: 100%; 
}

Ich hoffe, dies wird hilfreich sein.

Quelle

2014-08-13 11:12:56

Wie Scroll für bestimmte div aktivieren und Scroll für Seite deaktivieren

Antwort

Verwandte Themen