Можно ли использовать CSS, чтобы скрыть полосу прокрутки? Как бы вы это сделали?

Установите overflow: hidden;тег body следующим образом:

<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 Presentation отвечает за отображение полос прокрутки.

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

• MSDN. Основные свойства пользовательского интерфейса
• W3C. О нестандартных свойствах полосы прокрутки
• MSDN. .NET ScrollBar Class

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- Применяется ко всем элементам полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки. (В последние ночи этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.)

Примеры этих комбинаций

::-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 общедоступная статическая регистрация обработчика addWindowScrollHandler (обработчик Window.ScrollHandler)

  Добавляет обработчик Window.ScrollEvent Параметры: handler - обработчик Returns: возвращает регистрацию обработчика [ source ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

У Mozilla есть некоторые расширения для манипулирования полосами прокрутки, но все они рекомендуется не использовать.

• -moz-scrollbars-none Они рекомендуют использовать переполнение: скрыто вместо этого.
• -moz-scrollbars-horizontal Похоже на переполнение-х
• -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

History API также включает в себя функции восстановления прокрутки при навигации по страницам, чтобы сохранить положение прокрутки при загрузке страницы.

window.history.scrollRestoration может использоваться для проверки состояния скролла восстановления или изменения его статуса (добавление ="auto"/"manual" . Авто является значением по умолчанию. Изменение на ручное означает, что вы, как разработчик, станете владельцем любых изменений прокрутки, которые могут потребоваться, когда пользователь переходит к истории приложения. Если вам нужно, вы можете следить за положением прокрутки при перемещении записей истории с помощью history.pushState ().

---

Дальнейшее чтение:

• Полоса прокрутки в Википедии
• Полоса прокрутки (Windows)
• Метод прокрутки
• Метод прокрутки - Microsoft Dev Network
• iScroll на Github (ссылка в первом разделе выше)
• Scrolling and Scrollbars статья о юзабилити от Якоба Нильсена

Примеры

• Независимые панели прокрутки без прокрутки тела (с использованием только CSS) - Бен Фрейн (10-21-2014)

Вы можете сделать это с помощью обертки div, в которой переполнение скрыто, а внутреннее значение divустановлено на auto.

Чтобы убрать внутреннюю divполосу прокрутки, вы можете вытащить ее из внешнего 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 (Ice Cream Sandwich, как в собственном браузере, так и в Chrome) и на iPad с iOS 6 (как в Safari, так и в Chrome).

Используйте свойство CSSoverflow :

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

Вот еще несколько примеров:

• переполнение-х, переполнение-у тесты
• Свойство переполнения 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 Полосы прокрутки скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесо мыши работает. Окна.
• Safari 5.1.10 Полосы прокрутки скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесо мыши и трекпад работают. OS 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 с некоторыми опциями, такими как автоматическое скрытие , маленькая версия , только прокрутка -y или только-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 (и более поздние версии) - возможно, этого достаточно для ваших целей.

Прокрутка, прокрутка, прокрутка имеет хорошее обсуждение.