Jak włączyć przewijanie dla określonego elementu div i wyłączyć przewijanie dla strony

Czy można wyłączyć przewijanie strony i włączyć tylko dla określonego obiektu div na stronie?Jak włączyć przewijanie dla określonego elementu div i wyłączyć przewijanie dla strony

Źródło

2013-08-23 Caspert

Jest ok rozwiązanie tylko css?

Jeśli tak, po prostu dodaj przelew: ukryty w treści i przepełnieniu: automatycznie w przewijanym div.

body { 
    overflow: hidden; 
} 

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

Example

Źródło

2013-08-23 20:24:25 patrick

Bezwzględnie, css byłoby świetnie. Próbowałem twojego kodu, działa, ale pasek przewijania jest ukryty po zawartości. Również niektóre elementy nie są całkowicie widoczne w div #scroller. – Caspert

co masz na myśli, gdy pasek przewijania jest ukryty po zawartości? – patrick

Pasek przewijania przeglądarki znajduje się za zawartością, więc nie mogę już z niego korzystać. @ Patricka – Caspert

wyłączyć go używać:

css

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

wystarczy dodać <body class="disableScroll"> do wyłączyć

inline stylu<body style="overflow:hidden">

do użytku div, pozostawić przewijania włączone <div style="overflow:auto;">

Należy pamiętać, że można wykorzystać przepełnienia-y do pionowego przewijania i przelewowym-x dla poziomych właściwości przewijania

Źródło

2013-08-23 20:27:09 Tatarin

dlaczego nie po prostu 'overflow: hidden' zamiast overflow-x i y? –

@Harsh, aby zapewnić większą elastyczność, na wypadek, gdyby chciał wyłączyć pionowe i poziome – Tatarin

na całej stronie:

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

dla div na przykład:

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

}

w HTML:

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

Źródło

2013-08-23 20:27:55

Upewnij się, że znaczniki BODY i HTML nie mają dopełnienia i marginesu, w przeciwnym razie 'width: 100%;' i 'height: 100%' przesuwają krawędzie poza zakresem i tworzyć paski przewijania. – Broxzier

Witam @ArtsiomMitrokhin Próbowałem twoich kodów. Działa, ale kiedy dojdę do góry lub dołu, zobaczysz, że możesz przewijać.Tylko u dołu i u góry, gdy dojdziesz do dolnej części obszaru zawartości z klasą przewijania. – Caspert

HTML:

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

CSS:

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

}

Na całej stronie:

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

Mam nadzieję, że będzie to pomocne.

Źródło

2014-08-13 11:12:56

Jak włączyć przewijanie dla określonego elementu div i wyłączyć przewijanie dla strony

Odpowiedz

Powiązane problemy