CSS - Overflow: Scroll; - Zawsze wyświetlać pionowy pasek przewijania?

224

Więc obecnie mam:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

Jednak nie wierzę, że dla niektórych użytkowników będzie oczywiste, że jest tam więcej treści. Mogą przewijać stronę w dół, nie wiedząc, że mój div zawiera o wiele więcej treści. Używam wysokości 510px, aby odciąć trochę tekstu, więc na niektórych stronach wygląda na to, że jest więcej treści, ale to nie działa na wszystkie z nich.

Korzystam z komputera Mac, aw przeglądarce Chrome i Safari pionowy pasek przewijania będzie wyświetlany tylko wtedy, gdy mysz znajdzie się nad Div, a Ty będziesz aktywnie przewijać. Czy istnieje sposób, aby zawsze wyświetlał?

— Jambo
źródło

4

Uhm, czy możesz odtworzyć to dokładne zachowanie na jsfiddle ? Podany css powinien wymuszać obecność paska przewijania przez cały czas.

— sg3s

1

Tak, wygląda na to, że masz jakieś dziwactwa CSS, które powodują, że powinien zawsze wyświetlać pasek przewijania. Upewnij się, że div owijający ten jest poprawnie zaprojektowany.

— Shawn Steward

Prowadzę Lwa! Może to jest to? Otworzę maszynę wirtualną i zobaczę, jak to jest po stronie okien rzeczy ...

— Jambo,

1

Cholera, mój zły! Jest to funkcja w Lionie. Powinienem naprawdę przeczytać to, co kupuję, zanim to kupię ... Dzięki!

— Jambo,

386

Właśnie wpadłem na ten problem. OSx Lion ukrywa paski przewijania, gdy nie są używane, aby wyglądały bardziej „gładko”, ale jednocześnie pojawia się problem, który rozwiązałeś: ludzie czasami nie widzą, czy div ma funkcję przewijania, czy nie.

Poprawka: w twoim css obejmują -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Pokaż fragment kodu

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

Rozwiń fragment kodu

w razie potrzeby dostosuj wygląd. Źródło

— NoviceCoding
źródło

6

Czy to powinno działać również na iPadzie z Safari? Jestem na iPadzie 2 z systemem iOS 6.1.3 i to nie działa.

— crmpicco,

6

Czy istnieje sposób, aby zastosować to tylko dla określonej klasy?

— futbolpal

2

Działało dla mnie dopiero po ustawieniu „overflow: auto” na kontenerze (w moim przypadku <ul>). Dzięki!

— Rob Campion

8

@futbolpal tak, wydaje się, że działa to w klasie; spróbuj .classname :: - webkit-scrollbar

— Chase

4

jak mogę ustawić to do pracy poziomej? pasek pokazuje przewijanie w pionie, ale nie przewijanie w poziomie

— BritishSam

14

Uwaga na iPadzie Safari, rozwiązanie NoviceCoding nie będzie działać, jeśli masz - webkit-overflow-scrolling: touch;gdzieś w twoim CSS. Rozwiązaniem jest usunięcie wszystkich wystąpień -webkit-overflow-scrolling: touch;lub wprowadzenie -webkit-overflow-scrolling: auto;rozwiązania NoviceCoding.

— Razan Paul
źródło

3

Czy można mieć oba w naszym css - webkit-overflow-scrolling: touch i paski przewijania?

— Julsy,

1

To będzie działać z iPadem w Safari na iOS 7.1.x z moich testów, ale nie jestem pewien co do iOS 6. Nie będzie to jednak działać w przeglądarce Firefox. Istnieje wtyczka jQuery, która ma być zgodna z różnymi przeglądarkami o nazwie jScrollPane .

Istnieje również zduplikowany post na przepełnieniu stosu, który zawiera kilka innych szczegółów.

— JStarcher
źródło

5

Pamiętaj, że to pytanie zostało zadane 2 lata temu, zanim iOS6 istniał.

— OGHaza

webkit to tylko Safari Chrome. Będziesz musiał celować w silnik specyficzny dla Firefoksa

— TigerBear

-4

Spowoduje to, że paski przewijania będą zawsze wyświetlane, gdy w oknach jest zawartość, którą należy przewinąć, aby uzyskać dostęp, dotyczy to wszystkich okien i wszystkich aplikacji na komputerze Mac:

Uruchom Preferencje systemowe z  menu Apple Kliknij panel ustawień „Ogólne” Poszukaj „Pokaż paski przewijania” i zaznacz pole wyboru obok „Zawsze” Zamknij Preferencje systemowe po zakończeniu

— Michelle
źródło

18

Odpowiada to na pytanie, ale jest to poprawka po stronie klienta, a nie po stronie serwera. Więc to jest coś, co użytkownik strony musi zrobić, Stackoverflow to strona programistyczna, więc ludzie zwykle przychodzą tutaj, aby znaleźć rozwiązanie w kodzie, a nie sposób na zmianę ustawień przeglądarki.

— Eric Leschinski,