Чи можна використовувати CSS, щоб приховати смугу прокрутки? Як би ти це зробив?

Встановіть overflow: hidden;на тезі тіла так:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Код вище приховує як горизонтальну, так і вертикальну смугу прокрутки.

Якщо ви хочете приховати лише вертикальну смугу прокрутки , використовуйте overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

А якщо ви хочете приховати лише горизонтальну смугу прокрутки , використовуйте overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Примітка. Також вимкнено функцію прокрутки. Нижче наведено відповіді, якщо ви хочете просто приховати смугу прокрутки, але не функцію прокрутки.

WebKit підтримує псевдоелементи прокрутки, які можна приховати за допомогою стандартних правил CSS:

#element::-webkit-scrollbar {
    display: none;
}

Якщо ви хочете, щоб усі смуги прокрутки були прихованими, використовуйте

::-webkit-scrollbar {
    display: none;
}

Я не впевнений у відновленні - це спрацювало, але може бути правильний спосіб зробити це:

::-webkit-scrollbar {
    display: block;
}

Ви, звичайно, завжди можете використовувати width: 0, що потім можна легко відновити width: auto, але я не прихильник зловживань widthщодо налаштування видимості.

Firefox 64 тепер підтримує експериментальне властивість ширини прокрутки за замовчуванням (63 вимагає встановити прапор конфігурації). Щоб приховати смугу прокрутки в Firefox 64:

#element {
    scrollbar-width: none;
}

Щоб побачити, чи підтримує ваш поточний браузер або псевдоелемент, або scrollbar-widthспробуйте цей фрагмент:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Зауважте, що це насправді не є правильною відповіддю на питання, оскільки він приховує і горизонтальні смуги, але це те, що я шукав, коли Google вказав мені сюди, тому я подумав, що все-таки опублікую його.)

Так, начебто ..

Коли ви ставите запитання: "Чи можна видалити смуги прокрутки браузера якимось чином, а не просто заховати або замаскувати", всі скажуть "Неможливо", оскільки неможливо видалити смуги прокрутки з усіх браузерів у сумісний і крос-сумісний спосіб, і тоді є весь аргумент зручності використання.

Однак можна запобігти виникненню необхідності у веб-переглядачі генерувати та відображати смуги прокрутки, якщо ви не дозволяєте веб-сторінці переповнюватись.

Це просто означає, що нам потрібно активно підміняти таку поведінку, яку зазвичай виконує браузер для нас, і говорити браузеру спасибі, але не дякую приятелю. Замість того, щоб намагатися видалити смуги прокрутки (що всі ми знаємо, що це неможливо), ми можемо уникати прокрутки (цілком здійсненно) та прокручування в межах елементів, які ми створюємо, і маємо більший контроль над ними.

Створіть div з прихованим переповненням. Виявити, коли користувач намагається прокрутити, але не в змозі, тому що ми відключили можливість браузерів прокручуватися з переповненням: приховано .. і замість цього переміщувати вміст вгору за допомогою JavaScript, коли це відбувається. Тим самим створюючи нашу власну прокрутку без прокрутки браузерів за замовчуванням або використовуючи плагін, як iScroll .

---

Заради ретельного; всі способи маніпулювання смугами прокрутки, визначені конкретним виробником:

Internet Explorer 5.5+

* Ці властивості ніколи не були частиною специфікації CSS, ні вони ніколи не були затверджені або встановлені префіксом постачальника, але вони працюють в Internet Explorer і Konqueror. Вони також можуть бути встановлені локально в таблиці стилів користувача для кожної програми. В Internet Explorer ви знаходите його на вкладці "Доступність", в Konqueror на вкладці "Стилі таблиці".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Як і в Internet Explorer 8, ці властивості були встановлені префіксом Microsoft, але вони все ще ніколи не були затверджені W3C .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Детальніші відомості про Internet Explorer

Internet Explorer надає scrollдоступ, який встановлює, чи потрібно відключати чи вмикати смуги прокрутки; він також може бути використаний для отримання значення положення смуг прокрутки.

У Microsoft Internet Explorer 6 і пізніших версій, коли ви використовуєте !DOCTYPEдекларацію для визначення режиму, сумісного зі стандартами, цей атрибут застосовується до елемента HTML. Якщо режим невідповідності стандартам не визначений, як у попередніх версіях Internet Explorer, цей атрибут застосовується до BODYелемента, а не до HTMLелемента.

Варто також зазначити, що при роботі з .NET клас ScrollBar System.Windows.Controls.Primitivesв рамках Презентації відповідає за візуалізацію смуг прокрутки.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. Основні властивості інтерфейсу
• W3C. Про нестандартні властивості смуги прокрутки
• MSDN. .NET Клас прокрутки

WebKit

Розширення WebKit, що стосуються налаштування смуги прокрутки, є:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Їх можна комбінувати з додатковими псевдоселекторами:

• :horizontal - Горизонтальний псевдоклас застосовується до будь-яких фрагментів прокрутки, які мають горизонтальну орієнтацію.
• :vertical - Вертикальний псевдоклас застосовується до будь-яких фрагментів прокрутки, які мають вертикальну орієнтацію.
• :decrement- Псевдоклас декременту стосується кнопок і композицій треку. Він вказує, чи зменшуватиме кнопка або фрагмент доріжки положення перегляду при використанні (наприклад, на вертикальній смузі прокрутки, зліва на горизонтальній смузі прокрутки).
• :increment- Псевдоклас приросту застосовується до кнопок і композицій треку. Він вказує, чи буде кнопка або доріжка збільшувати положення перегляду при використанні (наприклад, вертикальна смуга прокрутки, праворуч на горизонтальній смузі прокрутки).
• :start- Стартовий псевдоклас стосується кнопок та композицій треку. Він вказує, чи розміщений предмет перед великим пальцем.
• :end- Кінцевий псевдоклас стосується кнопок та композицій треку. Він вказує, чи розміщується об’єкт після великого пальця.
• :double-button- Псевдоклас з подвійною кнопкою застосовується до кнопок і композицій треків. Він використовується для визначення того, чи є кнопка частиною пари кнопок, які знаходяться разом на одному кінці смуги прокрутки. Для композицій треку вказується, чи композиція треку опирається на пару кнопок.
• :single-button- Псевдоклас з однією кнопкою стосується кнопок і композицій треку. Він використовується для визначення того, чи є кнопка сама по собі в кінці смуги прокрутки. Для композицій треку вказує, чи опорна композиція лежить на однотонній кнопці.
• :no-button - Застосовується до фрагментів треку та вказує, чи йде доріжка до краю смуги прокрутки, тобто немає кнопки на тому кінці доріжки.
• :corner-present - Застосовується до всіх фрагментів прокрутки і вказує, чи є куточок прокрутки чи ні.
• :window-inactive- Застосовується до всіх фрагментів прокрутки і вказує, чи є вікно, що містить смугу прокрутки, активно. (Останніми солов’ями цей псевдоклас зараз застосовується і до: виділення. Ми плануємо розширити його на роботу з будь-яким вмістом і запропонувати його як новий стандартний псевдоклас.)

Приклади цих комбінацій

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Стилі прокрутки - Webkit.org

Детальніші відомості про Chrome

addWindowScrollHandler загальнодоступний статичний обробникRegistration addWindowScrollHandler (Window.ScrollHandler обробник)

  Додає параметр обробника Window.ScrollEvent Параметри: обробник - обробник Повертає: повертає реєстрацію обробника [ джерело ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Мозіла

Mozilla має деякі розширення для маніпулювання смугами прокрутки, але їх рекомендується не використовувати.

• -moz-scrollbars-none Вони рекомендують використовувати перелив: прихований замість цього.
• -moz-scrollbars-horizontal Схожий на overflow-x
• -moz-scrollbars-vertical Подібно до переповнення-у

• -moz-hidden-unscrollableПрацює лише внутрішньо в налаштуваннях профілю користувача. Вимикає прокручування кореневих елементів XML та відключає використання клавіш зі стрілками та колесо миші для прокрутки веб-сторінок.

• Документи розробника Mozilla в розділі "Переповнення"

Детальніше про Mozilla

Наскільки я знаю, це не дуже корисно, але варто зазначити, що атрибут, який контролює, чи відображаються смуги прокрутки у Firefox, є ( посилання на посилання ):

• Атрибут:        смуги прокрутки
• Тип:               nsIDOMBarProp
• Опис:   Об'єкт, який контролює, чи потрібно смуги прокрутки, відображаються у вікні. Цей атрибут "замінюється" в JavaScript. Лише для читання

І останнє, але не менш важливе, підкладка - це як магія.

Як вже було сказано в деяких інших відповідях, ось ілюстрація, яка є достатньо зрозумілою.

Урок історії

Просто тому, що мені цікаво, я хотів дізнатися про походження прокрутки, і це найкращі посилання, які я знайшов.

• 10 Винаходи прокрутки та смуги прокрутки
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Різне

У проекті специфікації HTML5 seamlessатрибут був визначений, щоб запобігти появі смуг прокрутки в iFrames, щоб їх можна було поєднувати з навколишнім вмістом на сторінці . Хоча цей елемент не відображається в останній редакції.

Об'єкт scrollbarBarProp є дочірнім windowоб'єктом і представляє елемент інтерфейсу користувача, який містить механізм прокрутки, або якусь подібну концепцію інтерфейсу. window.scrollbars.visibleповернеться, trueякщо видно смуги прокрутки.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

API історії також включає функції відновлення прокрутки на навігації по сторінці, щоб зберегти положення прокрутки при завантаженні сторінки.

window.history.scrollRestorationможна використовувати для перевірки стану відновлення прокрутки або зміни його статусу (додавання ="auto"/"manual". Авто - це значення за замовчуванням. Змінивши його вручну означає, що ви як розробник будете брати право власності на будь-які зміни прокрутки, які можуть знадобитися, коли користувач переглядає історію програми . Якщо вам потрібно, ви можете відслідковувати положення прокрутки, натискаючи записи історії за допомогою history.pushState ().

---

Подальше читання:

• Панель прокрутки у Вікіпедії
• Панель прокрутки (Windows)
• Метод прокрутки
• Метод прокрутки - мережа Microsoft Dev
• iScroll в Github (на який посилався в першому розділі вище)
• Прокрутка та смуги прокрутки стаття про зручність використання Якоба Нільсена

Приклади

• Незалежні панелі прокрутки без прокрутки тіла (використовуючи лише CSS) - Бен Фрейн (21.10.2014)

Ви можете досягти цього за допомогою обгортки div, у якій прихований перелив, і внутрішній divнабір auto.

Щоб видалити внутрішню divсмугу прокрутки, ви можете витягнути її із зовнішнього divполя перегляду, застосувавши до внутрішнього негативне поле div. Потім нанесіть рівну прокладку на внутрішній поділ, щоб вміст залишався на виду.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Це працює для мене з простими властивостями CSS:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Для старих версій Firefox використовуйте: overflow: -moz-scrollbars-none;

Ось моє рішення, яке теоретично охоплює всі сучасні браузери:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html можна замінити будь-яким елементом, за яким потрібно приховати смугу прокрутки.

_{Примітка . Я пропустив інші 19 відповідей, щоб побачити, чи не висвітлено код, який я публікую, і, схоже, жодна відповідь не підводить підсумок ситуації, що склалася в 2019 році, хоча багато з них детально описуються. Вибачте, якщо це сказав хтось інший, і я пропустив це.}

Я думаю, що я знайшов вирішення для вас, хлопці, якщо ви все ще зацікавлені. Це мій перший тиждень, але він працював на мене ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Якщо ви шукаєте рішення, як сховати смугу прокрутки для мобільних пристроїв, дотримуйтесь відповіді Петра !

Ось jsfiddle , яка використовує рішення нижче, щоб приховати горизонтальну смугу прокрутки.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Він був протестований на планшеті Samsung з Android 4.0.4 (сендвіч з морозивом, як у рідному браузері, так і в Chrome) та на iPad із iOS 6 (як у Safari, так і в Chrome).

Використовуйте властивість CSSoverflow :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Ось ще кілька прикладів:

• тести overflow-x, overflow-y
• Властивість переповнення CSS

Як вже говорили інші, використовуйте CSS overflow.

Але якщо ви все ще хочете, щоб користувач міг прокручувати цей вміст (не видно смуги прокрутки), вам потрібно використовувати JavaScript.

Тут я знайшов свою відповідь на рішення: Сховати смугу прокрутки, поки ще можна прокручувати мишу / клавіатуру

Окрім відповіді Петра:

#element::-webkit-scrollbar {
    display: none;
}

Це буде працювати так само і для Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Перехресний підхід браузера до приховування смуги прокрутки.

Він був протестований на Edge, Chrome, Firefox та Safari

Сховати смугу прокрутки, поки ще можна прокручувати колесо миші!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

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

Щоб приховати смуги прокрутки, техніка Джона Курлака добре працює, за винятком того, що залишає користувачів Firefox, які не мають сенсорних панелей, не мають можливості прокрутки, якщо у них немає миші з колесом, що вони, ймовірно, роблять, але навіть тоді вони зазвичай можуть лише прокручуватися вертикально .

Техніка Джона використовує три елементи:

• Зовнішній елемент для маскування смуг прокрутки.
• Середній елемент, щоб мати смуги прокрутки.
• І вмістовий елемент обидва встановить розмір середнього елемента та зробить його смугами прокрутки.

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

Моя найбільша стурбованість - чи всі версії браузерів встановлюють смуги прокрутки, щоб зробити видимим переповнений вміст. Я тестував у поточних браузерах, але не в старих.

Вибачте мій SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Тестування

OS X становить 10.6.8. Windows - це Windows 7.

• Firefox 32.0 прокрутки приховано. Клавіші зі стрілками не прокручуються навіть після натискання на фокус, але це колесо миші та два пальці трекпада. OS X та Windows.
• Приховані смуги прокрутки Chrome 37.0. Клавіші зі стрілками працюють після натискання на фокус. Робота колеса миші та трекпад. OS X та Windows.
• Internet Explorer 11 Панелі прокрутки приховано. Клавіші зі стрілками працюють після натискання на фокус. Колесо миші працює. Windows.
• Safari 5.1.10 Панелі прокрутки приховані. Клавіші зі стрілками працюють після натискання на фокус. Робота колеса миші та трекпад. ОС X.
• Android 4.4.4 та 4.1.2. Панелі прокрутки приховані. Функція сенсорної прокрутки працює. Пробували в Chrome 37.0, Firefox 32.0 та HTMLViewer 4.4.4 (що б там не було). У HTMLViewer сторінка має розмір вмісту, що маскується, і її можна прокручувати! Прокрутка приємно взаємодіє із збільшенням сторінки.

Я просто думав, що хотів би зазначити комусь, хто читає це питання, що налаштування overflow: hidden(або переповнення y) на bodyелементі не приховувало для мене смуги прокрутки.

Мені довелося використовувати htmlелемент.

Я написав версію WebKit з деякими параметрами, такими як автоматичне приховування , невелика версія , прокрутка only-y або only-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Скопіюйте цей CSS-код у код клієнта для приховування смуги прокрутки:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

Мій HTML такий:

<div class="container">
  <div class="content">
  </div>
</div>

Додайте це до місця, divде ви хочете приховати смугу прокрутки:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

І додайте це в контейнер

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Щоб вимкнути вертикальну смугу прокрутки, просто додайте overflow-y:hidden;.

Дізнайтеся більше про це: переповнення .

Моя відповідь прокручується навіть тоді overflow:hidden;, коли за допомогою jQuery:

Наприклад, прокрутіть горизонтально за допомогою колеса миші:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Я вважаю, що ви можете керувати цим overflowатрибутом CSS, але у них обмежена підтримка браузера. Одне джерело сказало, що це Internet Explorer 5 (і пізніші версії), Firefox 1.5 (і пізніші версії) та Safari 3 (і пізніші) - можливо, достатньо для ваших цілей.

Прокручування, прокрутка, прокрутка має гарне обговорення.

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

body {
  overflow-y: scroll;
  margin-right: -20px;
}