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

Ответ 1

Изменить, следуя комментариям, пожалуйста, kritzikratzi:

[Starting] с ios 5beta можно добавить новое свойство -webkit-overflow-scrolling: touch, которое должно привести к ожидаемому поведению.

Некоторые, но очень мало, читайте ниже:

• Первичная прокрутка импульса в iOS 5

Оригинальный ответ, оставшийся для потомков.

К сожалению, ни overflow: auto, ни scroll не создает полосы прокрутки на устройствах iOS, по-видимому, из-за ширины экрана, на которые будут применены такие полезные механизмы.

Вместо этого, как вы нашли, пользователи должны выполнить прокрутку с двумя пальцами, чтобы прокрутить содержимое overflow -ed. Единственная ссылка, так как я не могу найти руководство для самого телефона, я мог бы найти здесь: tuaw.com: iPhone 101: Двуручный прокрутка.

Единственное, о чем я могу думать, это, если вы можете использовать какой-то JavaScript и, возможно, jQTouch, создать свои собственные полосы прокрутки для элементов overflow. В качестве альтернативы вы можете использовать @media-запросы, чтобы удалить overflow и полностью показать контент, так как пользователь iPhone получает мой голос, если только для простоты. Например:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

Предыдущий код происходит из A List Apart, из той же статьи, связанной с выше (я не уверен, почему они ушли из type="text/css", но я предполагаю, что есть причины.

Ответ 2

Я провел некоторое тестирование и использовал 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, но вы можете взаимодействовать с контентом, чтобы прокручивать его

Ответ 3

Применить этот код в 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);
}

Ответ 4

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

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);
    }
}

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

  position:fixed

иначе он не сработает

Ответ 8

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

Ответ 9

Если вы пытаетесь достичь горизонтальной 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;
    }
}  

Изменено из вертикального решения (pre CSS trick):

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

Ответ 10

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

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

Ответ 11

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

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

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