Ответ 1

Установить 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>

Примечание: это также отключит функцию прокрутки. Обратитесь к ответам ниже, если вы просто хотите скрыть полосу прокрутки, но не функцию прокрутки.

Ответ 2

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 или 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>

Ответ 3

Да вроде..

Когда вы задаете вопрос: "Можно ли каким-либо образом удалить полосы прокрутки браузера, а не просто скрыть или скрыть их", все скажут "Невозможно", поскольку невозможно удалить полосы прокрутки из всех браузеров в совместимый и кросс-совместимый способ, а затем весь аргумент юзабилити.

Однако можно запретить браузеру создавать и отображать полосы прокрутки, если вы не допустите переполнения веб-страницы.

Это просто означает, что мы должны заранее заменить то же поведение, которое браузер обычно делает для нас, и сказать браузеру спасибо, но не спасибо, приятель. Вместо того, чтобы пытаться удалить полосы прокрутки (что, как мы все знаем, невозможно), мы можем избежать прокрутки (вполне выполнимо) и прокрутки внутри элементов, которые мы создаем, и иметь больший контроль над ними.

Создайте 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 - псевдокласс start применяется к кнопкам и фрагментам дорожки. Указывает, находится ли объект перед большим пальцем.
• :end - псевдокласс 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 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 Аналогично переполнению-x
• -moz-scrollbars-vertical Аналогично переполнению-y

• -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, чтобы их можно было смешивать с окружающим контентом на странице. Хотя этот элемент не появляется в последней редакции.

Объект scrollbar BarProp является дочерним элементом объекта 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 можно использовать для проверки состояния scrollrestoration или изменения его статуса (добавление ="auto"/"manual". Значение по умолчанию - auto. Изменение его на manual означает, что вы, как разработчик, станете владельцем любого изменения прокрутки, которые могут потребоваться, когда пользователь просматривает историю приложения. Если вам нужно, вы можете отслеживать положение прокрутки при перемещении записей истории с помощью history.pushState().

---

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

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

Примеры

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

Ответ 4

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

Чтобы удалить внутреннюю полосу прокрутки div, вы можете вытащить ее из внешнего 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;
}

Ответ 5

Это работает для меня с простыми свойствами 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;

Ответ 6

Я думаю, я нашел обходной путь для вас, ребята, если вы все еще заинтересованы. Это моя первая неделя, но у меня это сработало...

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

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

Ответ 7

Если вы ищете решение, чтобы скрыть полосу прокрутки для мобильных устройств, следуйте ответу Питера !

Здесь 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).

Ответ 8

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

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

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

• Переполнение-x, переполнение-y тесты
• Свойство переполнения CSS

Ответ 9

Как уже говорили другие люди, используйте CSS overflow.

Но если вы все еще хотите, чтобы пользователь мог прокручивать этот контент (без видимой полосы прокрутки), вы должны использовать JavaScript.

Вот мой ответ здесь для решения: скрыть полосу прокрутки, все еще будучи в состоянии прокручивать с помощью мыши/клавиатуры

Ответ 10

Кросс-браузерный подход к сокрытию полосы прокрутки.

Он был протестирован на 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;
}

Ответ 11

Помимо Питера отвечу:

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

Это будет работать так же для Internet Explorer 10:

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

Ответ 12

Если вы хотите, чтобы прокрутка работала, прежде чем скрывать полосы прокрутки, подумайте о стилизации их. Современные версии 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 страница это размер замаскированного содержимого и может быть прокручен слишком! Скроллинг взаимодействует приемлемо с масштабированием страницы.

Ответ 13

Я просто подумал, что всем, кто читает этот вопрос, я укажу, что настройка overflow: hidden (или overflow-y) в элементе body не скрывает полосы прокрутки для меня.

Я должен был использовать элемент html.

Ответ 14

Я написал версию 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

Ответ 15

Мой 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%;
}

Ответ 16

Чтобы отключить вертикальную полосу прокрутки, просто добавьте overflow-y:hidden; ,

Узнайте больше об этом: переполнение.

Ответ 17

Мой ответ будет прокручиваться даже при 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>

Ответ 18

Скопируйте этот код CSS в код клиента, чтобы скрыть полосу прокрутки:

<style>

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

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

</style>

Ответ 19

Вот мое решение, которое теоретически охватывает все современные браузеры:

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 году, хотя многие из них подробно раскрыты.Извинения, если это было сказано кем-то другим, и я пропустил это.}

Ответ 20

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

Scrolling, Scrolling, Scrolling - это хорошая дискуссия.