для полноты, это работает для webkit:

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

если вы хотите, чтобы все полосы прокрутки скрыты, используйте

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

Я не уверен в восстановлении - это сработало, но может быть правильный способ сделать это:

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

вы можете, конечно, всегда использовать width: 0, который может быть легко восстановлена с width: auto, но я не любитель злоупотреблять width для настроек видимости.

чтобы узнать, поддерживает ли ваш текущий браузер это, попробуйте следующее фрагмент:

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

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  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. Они также могут быть установлены локально в пользовательской таблице стилей для каждого приложения. В IE вы найдете его на вкладке "доступность", в Konqueror на вкладке" таблицы стилей".

body, html { /* these are default, can be replaced by hex 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;
}

С IE8 эти свойства были поставщиком с префиксом 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

IE делает scroll доступно, который устанавливает, следует ли отключить или включить полосы прокрутки; он также может быть использован для получения значения положения полос прокрутки.

С Microsoft Internet Explorer 6 и более поздних версий, когда вы используете !Объявление DOCTYPE чтобы указать режим, совместимый со стандартами, этот атрибут применяется к элементу HTML. Когда не соответствует стандартам режим указанный, как и в более ранних версиях IE, этот атрибут применяется к BODY элемент не the HTML элемент.

также стоит отметить, что при работе с .NET класс ScrollBar в System.Windows.Controls.Primitives в рамках презентации отвечает за визуализацию полос прокрутки.

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

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

в 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 – горизонтальный псевдокласс применяется к любому части scrollbar которые имеют горизонтальную ориентацию.
• :vertical – вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию.
• :decrement – псевдокласс decrement применяется к кнопкам и частям дорожки. Он указывает, будет ли кнопка или часть дорожки уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, слева на горизонтальной полосе прокрутки).
• :increment – приращение псевдо-класса применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или часть дорожки увеличивать положение вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
• :start – псевдо-класс start применяется к кнопкам и фрагментам дорожки. Указывает, помещен ли объект перед большим пальцем.
• :end – конечный псевдокласс применяется к кнопкам и фрагментам дорожки. Указывает, помещается ли объект после большой палец.
• :double-button – псевдо-класс двойн-кнопки применяется к кнопкам и частям следа. Он используется для определения, является ли кнопка частью пары кнопок, которые находятся вместе на одном конце полосы прокрутки. Для частей следа оно показывает ли часть следа упирается пара кнопок.
• :single-button – псевдо-класс одиночн-кнопки применяется к кнопкам и частям следа. Он используется для определения того, находится ли кнопка сама по себе в конце полосы прокрутки. Для трека шт. указывает, примыкает ли фрагмент дорожки к кнопке singleton.
• :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
публичная статическая HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)

добавляет окно.Обработчик ScrollEvent
Параметры:
  handler - обработчик
Возвращает:
  возвращает регистрацию обработчика
[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 Developer Docs on'Overflow'

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

---

читайте далее:

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

примеры

• независимые панели прокрутки без прокрутки тела (используя только CSS) - Ben Frain (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 overflow и -ms-overflow-style в сочетании с ::-webkit-scrollbar.

протестировано на IE10+, Firefox, Safari и Chrome и работает хорошо:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

это гораздо лучшее решение, чем другие, когда вы скрыть полосу прокрутки с padding-right, потому что ширина полосы прокрутки по умолчанию на каждом браузере.

Примечание: В последних версиях Firefox -moz-scrollbars-none свойство является устаревшим ( ссылке ).

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

<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).

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

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

использовать свойство переполнения css:

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

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

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/

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

Протестировано 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;
}

В дополнение к ответу Петра:

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

это будет работать одинаково для IE10:

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

Если вы хотите, чтобы прокрутка работала, прежде чем скрывать полосы прокрутки, рассмотрите стиль их. Современные версии OS X и мобильных ОС имеют полосы прокрутки, которые, в то время как непрактичны для захвата мышью, достаточно красивы и нейтральны.

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

техника Джона использует три элемента:

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

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

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

извините Сасс; 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 Полосы прокрутки скрыты. Клавиши со стрелками работают после нажатия на фокус. Колесо мыши и трекпад работает. X. В ОС
• Android 4.4.4 и 4.1.2. Полосы прокрутки скрыты. Сенсорная прокрутка работает. Пробовал в Chrome 37.0, Firefox 32.0, и HTMLViewer на 4.4.4 (что бы это ни было). В HTMLViewer страница размер маскированного контента и может быть прокручен тоже! Прокрутка взаимодействует приемлемо с масштабированием страницы.

просто подумал, что я укажу кому-нибудь еще, читающему этот вопрос, что настройка overflow: hidden (или overflow-y) на элементе body не скрывала полосы прокрутки для меня. Мне пришлось использовать элемент HTML.

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

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

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

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

эта ссылка имеет хорошее обсуждение:http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/

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

подробнее о :переполнения