Chrome (windows) не скрывает полосу прокрутки

У меня есть этот прокручиваемый div, который (на моем Mac в Chrome) скрывает полосу прокрутки, когда я не прокручиваю. Однако в Windows 8 он не работает в Chrome и Firefox.

Т.е. это тоже не поддерживается, но я включил его, используя следующий CSS:

-ms-overflow-style: -ms-autohiding-scrollbar; 

Есть ли способ включить это поведение для Chrome и Firefox

Вот jsfiddle

возможно, вы можете использовать что-то подобное?

 body { margin:0; padding:0; overflow-y: hidden; } body:hover { overflow-y: scroll; } 

http://jsfiddle.net/4RSbp/165/

Полоса прокрутки скрывается на вашем Mac, потому что это системное предпочтение (Системные настройки> Общие> Показать полосы прокрутки). И, к сожалению, нет версии -ms-overflow-style для Firefox или Chrome.

Для тех, кто отправляется сюда, если вы хотите скрыть полосы прокрутки кросс-браузерным способом и поддерживать возможность прокрутки без визуального скрещивания мыши над рендерингом; скрыть их за пределы вашего контейнера – хороший подход. (Остерегайтесь, это будет долго)

Предположим, у вас есть прокручиваемый контейнер, и вы хотите скрыть вертикальную полосу прокрутки (даже тонкую прозрачную, которая демонстрирует современные системы). его идентификатор: # scrollable:

  [...] 
Some Y large content
[...]

Для достижения того, что мы хотим, #scrollable должен содержаться только узлом для него (div будет работать в этом примере # scrollable-cover), и мы должны знать ширину и высоту ширины прокрутки. Допустим, это будет область 800px x 900px. Итак, мы получили:

  [...] 
Some Y large content
[...]

И его CSS:

 #scrollable-cover { width: 800px; height: 900px; overflow: hidden } #scrollable { width: 820px; height: 100%; overflow: scroll; } 

При этом #scrollable будет растягиваться до высоты его промежуточного родителя (# scrollable-cover), и его большое содержимое отобразит его как прокручиваемое поле, но, поскольку его ширина на 20 пикселей больше, чем его родительская, которая имеет «переполнение» : hidden ‘, полоса прокрутки не будет отображаться, потому что она отображает 20px, скрытую справа от # scrollable.

Это приводит нас к неудобству, содержание #scrollable также может быть рендерингом в этой скрытой области ширины 20 пикселей; чтобы избежать этого, существует два метода. Один из них заключается в том, чтобы обернуть все содержимое #scrollable в # прокручиваемой оболочке с шириной 800 пикселей и автоматической высотой:

  [...]  [...] 
Some Y large content
[...]

Таким образом, весь контент будет отображаться в макете ширины 800 пикселей в нашем прокручиваемом окне. Но, если вы не хотите добавлять еще один элемент, вы можете решить это с помощью опции «Только второй CSS», используя размер windows 20px в правой части:

 #scrollable-cover { width: 800px; height: 900px; overflow: hidden } #scrollable { width: 820px; height: 100%; overflow: scroll; padding-right: 20px box-sizing: border-box; } 

Таким образом, все, что отображается внутри #scrollable, позволит избежать скрытой области 20px справа, а «box-sizing: border-box» сообщит браузеру о включении 20px отступов в общей ширине 820px # scrollable (в противном случае, он вырастет до вычисленного в общей сложности 840px). Совместимость с размерами коробки: http://caniuse.com/#search=box-sizing

И, конечно же, этот пример может также работать с горизонтальной прокруткой, просто увеличивая высоту #scrollable 20px выше высоты его промежуточного родителя. Это ключ;)