Скрытие полосы прокрутки на странице HTML

Question

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

<style>

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

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

</style>

Answer 9

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

Answer 10

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

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