CSS-полосы прокрутки скрывают проблему на настольных и мобильных устройствах

Я пытаюсь скрыть вертикальные полосы прокрутки, используя классический метод создания внешнего контейнера / w, скрытого переполнения, и внутреннего контейнера с отрицательным полем, например:

.Wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
}

.Items {
    display:block;
    margin-right:-17px; /* Scrollbar's width */
    overflow-y:scroll;
    overflow-x:hidden;
}

Действительно, полосы прокрутки скрыты, когда я просматриваю их на настольном компьютере / ноутбуке.

К сожалению, я обнаружил, что сенсорные мобильные устройства (телефоны / планшеты) НЕ отображают полосы прокрутки. Вместо этого, когда вы касаетесь прокрутки, появляется небольшая полоса прокрутки. Проблема в том, что эти полосы прокрутки не добавляют дополнительной ширины, как полосы прокрутки на рабочем столе (17 пикселей), поэтому я получаю отрицательное поле, выходящее за границы и скрывающее 17 пикселей его содержимого.

Я также пытался absolute разместить внутренний контейнер .Items , но получил те же результаты :(

.Items {
    position:absolute;
    top:0;
    left:0;
    right:-17px;
}

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

Есть ли способ исправить это с помощью чистого CSS?

Предварительный просмотр проблемы


mobile hide css scrollbars
person Hakuna Matata    schedule 17.12.2016    source источник
comment
Вы могли бы использовать javascript, чтобы сделать настраиваемую полосу прокрутки невидимой.   -  person pol    schedule 17.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете определить стиль для небольших видовых экранов с помощью @media запроса. Вам нужно добавить следующий код в конец ваших правил css:

@media screen and (max-width: 992px) {
   .Items {
       position:absolute;
       top:0;
       left:0;
       right: -17px;
       overflow-y: scroll;
/* any style in this section will afect on Items
   on mobile and tablets with screen width less than 993px*/
   }
}
person Banzay    schedule 17.12.2016
comment
что, если пользователь просматривает страницу с рабочего стола, но в небольшом браузере с измененным размером? С помощью приведенного выше кода полосы прокрутки будут видны на рабочих столах. - person Hakuna Matata; 17.12.2016
comment
Я думаю, вы можете просто сделать так, чтобы полоса прокрутки всегда присутствовала: overflow-y:scroll; и вернула правый отступ. изменил ответ - person Banzay; 17.12.2016
comment
Я сделал это, но снова проблема не исчезла. Дело в том, что мобильные устройства не будут отображать никаких физических полос прокрутки (они будут отображать плавающую полосу прокрутки, когда пользователь коснется прокрутки, что не увеличивает ширину контейнера). - person Hakuna Matata; 17.12.2016