Как получить полосу прокрутки с переполнением CSS на iOS

Я сделал некоторые испытания и с помощью CSS3 переопределить полосы прокрутки работает, и вы получите, чтобы сохранить ваш Overflow:scroll; или Overflow:auto

Я закончил с чем-то вроде этого...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

единственная нижняя сторона, которую я еще не смог понять, - это как взаимодействовать с полосами прокрутки на iProducts, но вы можете взаимодействовать с контентом для его прокрутки

применить этот код в css

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

решение, данное Крисом Барром здесь

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

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

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

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

отлично работает для меня. Удалить событие.метод preventDefault если вам нужно использовать несколько кликов...

The iScroll4 библиотека javascript исправит это прямо. Он имеет hideScrollbar метод, который вы можете установить к false для предотвращения исчезновения полосы прокрутки.

другие 2 народа на так предложенном возможном CSS-единственном решении проблемы. Решение Дэвида Томаса идеально, но имеет ограничение, что полоса прокрутки видна только во время прокрутки.

для того, чтобы полосы прокрутки всегда были видны, можно следовать рекомендациям, предложенным по следующим ссылкам:

• как я могу предотвратить скрытие полос прокрутки для пользователей трекпада OS X в WebKit / Blink?
• CSS-переполнение: прокрутка; - Всегда показывать вертикальную полосу прокрутки?

убедитесь, что ваше тело и дивов нет

  position:fixed

иначе это не будет работать

по моему опыту вам нужно убедиться, что элемент имеет display:block; применил к -webkit-overflow-scrolling:touch; на работу.

если вы пытаетесь достичь горизонтальный div скролл С touch on mobile, обновленное исправление CSS не работает (протестировано на Android Chrome и iOS Safari нескольких версий), например:

-webkit-overflow-scrolling: touch

Я нашел решение и изменил его для горизонтальной прокрутки до трюка CSS. Я тестировал его на Android Chrome и iOS Safari, а события listener touch были вокруг долгое время, поэтому он имеет хорошую поддержку: 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/

отлично работает для меня, пожалуйста:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

используйте этот код, он работает в ios / android APP webview; он удаляет некоторые не переносимые css-код;