CSS - Переповнення: прокрутка; - Завжди показувати вертикальну смугу прокрутки?

Тому в даний час у мене є:

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

Однак я не вірю, що деяким користувачам буде очевидно, що там є більше вмісту. Вони могли прокручувати сторінку вниз, не знаючи, що мій дів насправді містить набагато більше вмісту. Я використовую висоту 510px, так що вона обрізає текст, тому на деяких сторінках це виглядає так, що вмісту більше, але це працює не для всіх.

Я використовую Mac, а в Chrome і Safari вертикальна смуга прокрутки відображатиметься лише тоді, коли миша над Div і ви активно прокручуєте. Чи є спосіб, щоб це завжди було відображено?

Просто я сам наткнувся на цю проблему. OSx Lion приховує смуги прокрутки, не використовуючи їх, щоб зробити їх "стрункішими", але в той же час виникає проблема, з якою ви зверталися: люди іноді не можуть бачити, чи має div має функцію прокрутки чи ні.

Виправлення: у свій css включено -

::-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>

за потреби налаштувати зовнішній вигляд. Джерело

Зверніть увагу на iPad Safari, рішення NoviceCoding не працюватиме, якщо у вас є - webkit-overflow-scrolling: touch;десь у вашому CSS. Рішення - це або видалити всі виникнення, -webkit-overflow-scrolling: touch;або поставити -webkit-overflow-scrolling: auto;рішення NoviceCoding.

Це буде працювати з iPad на Safari на iOS 7.1.x з мого тестування, але я не впевнений у iOS 6. Однак на Firefox це не працюватиме. Існує плагін jQuery, який має на меті бути перехресним браузером jScrollPane .

Крім того, тут є дублікат публікації на переповнюванні стека, який має деякі інші деталі.

Завдяки цьому смуги прокрутки завжди відображатимуться, коли у вікні є вміст, до якого потрібно прокрутити доступ, це стосується всіх вікон та всіх програм на Mac:

Запустіть системні налаштування у меню  Apple. Клацніть на панелі налаштувань «Загальні». Знайдіть «Показати смуги прокрутки» та виберіть радіобокс поруч із пунктом «Завжди». Завершіть налаштування системи, коли закінчите