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

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ł?

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);
}

/* 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>

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

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.

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.

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