Как скрыть конкретную полосу прокрутки? [Дубликат]

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

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

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

Кросс-браузер Подходит для скрытия полосы прокрутки.

Tested 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;
}

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

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

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

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

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

Вы можете использовать свойство 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 устарело ( ссылка ).

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

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

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

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

Я написал версию webkit с некоторыми опциями, такими как auto hide, небольшая версия, прокрутка только-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

Для полноты, это работает для 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 указал на меня здесь, поэтому Я решил, что все равно отправлю его.)

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

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

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

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

• Внешний элемент для маскировки полос прокрутки.
• Средний элемент для полос прокрутки.
• И элемент содержимого для обоих установите размер среднего элемента и сделайте его полосками прокрутки.

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

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

Простите мой 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;
}

Тестирование

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

Использовать свойство переполнения 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/

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

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

Вы можете выполнить это с помощью 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;
}

my 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%;
}

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

Вот jsfiddle , который использует ниже, чтобы скрыть горизонтальную полосу прокрутки.

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

Протестировано на планшете Samsung с Android 4.0.4 (как в родном браузере, так и на Chrome) и на iPad с iOS 6 (оба в Safari & amp; Chrome).