Как получить полосу прокрутки с переполнением CSS на iOS - PullRequest
76 голосов
/ 02 октября 2010

Разработка веб-сайта для iPad Я пытался использовать свойство CSS overflow: auto для получения полос прокрутки, если это необходимо, в div, но мое устройство отказывается показывать их, даже если прокрутка двумя пальцами работает.

Я пытался с

overflow: auto;

и

overflow: scroll;

и результат тот же.

Я тестирую только на iPad (на настольных браузерах работает отлично).

Есть идеи?

Ответы [ 11 ]

0 голосов
/ 01 марта 2016

Если вы пытаетесь добиться горизонтальной div прокрутки при касании на мобильном телефоне, обновленное исправление CSS не работает (протестировано на нескольких версиях Android Chrome и iOS Safari), например:

-webkit-overflow-scrolling: touch

Я нашел решение и изменил его для горизонтальной прокрутки до уловки CSS.Я тестировал его на Android Chrome и iOS Safari, и сенсорные события слушателей были известны давно, поэтому он имеет хорошую поддержку: http://caniuse.com/#feat=touch.

Использование:

touchHorizScroll('divIDtoScroll');

Функции:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

Модифицировано из вертикального решения (предварительный трюк CSS):

http://chris -barr.com / 2010/ 05 / scrolling_a_overflowauto_element_on_a_touch_screen_device /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...