Скрытие WebKit прокрутки при переполнении прокрутки: сенсорный включен

Question

Как мы все знаем, вы можете скрыть полосы прокрутки в Safari и хром со следующими CSS сниппет:

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

Однако, это не похоже на работу когда -webkit-overflow-scrolling установлен в touch, особенно на iOS. Хром правильно скрывает полосу прокрутки.

Это ошибка WebKit, или есть способ скрыть полосу прокрутки и разрешить прокрутку жидкости (касания)? Кажется, это возможно (возможно, с js?), На мобильной версии Google. Глядя через источник страницы и googling, мой ответ, похоже, не помог.

Answer 1

Похоже, что в настоящее время (по состоянию на январь 2017 года) единственный способ обойти это - обернуть прокручиваемый элемент внутри родительского div и вручную скрывать полосу прокрутки от представления.

Этого можно достичь, применяя фиксированную высоту/ширину и overflow: hidden; к родительскому div. Затем вы можете добавить дополнительный отступ или высоту/ширину к исходному элементу, чтобы, по существу, вытолкнуть полосу прокрутки из вида.

Mark Ottotweeted about the issue еще в июне 2016 года. Вот пример его обходного пути: https://output.jsbin.com/lohiga.

Основная идея идет что-то вроде этого:

<header> 
    <div> <!-- parent wrapper added --> 
    <nav> 
     <a href="#">First link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Last link</a> 
    </nav> 
    </div> 
</header> 

CSS:

header { 
    margin: 20px 0; 
    padding: 10px 5px; 
    text-align: center; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #ddd; 
} 

// Parent wrapper 
div { 
    height: 30px; 
    overflow-y: hidden; // "crop" the view so the scrollbar can't be seen 
} 

// Original scrollable element 
nav { 
    padding-bottom: 20px; // extra padding to push the scrollbar out of view 
    overflow-x: auto; 
    text-align: center; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

nav a { 
    display: inline-block; 
    padding: 5px 10px; 
}