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

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

Я пробовал с

overflow: auto;

и

overflow: scroll;

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

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

Есть идеи?

Отредактируйте после комментария, любезно оставленного kritzikratzi :

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

Некоторое, но очень небольшое, дополнительное чтение:

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

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

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

Вместо этого, как вы выяснили, пользователи должны проводить пальцем по экрану двумя пальцами, чтобы прокручивать overflowпомеченный контент. Единственная ссылка, поскольку я не могу найти руководство для самого телефона, я могла найти здесь: 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", но я предполагаю, что есть причины.

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

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

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

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, если вам нужно использовать несколько кликов ...

IScroll4 библиотеки JavaScript исправит это право. У него есть hideScrollbarметод, который вы можете установить, falseчтобы предотвратить исчезновение полосы прокрутки.

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

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

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

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

  position:fixed

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

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

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

.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; Удаляет некоторый непереносимый код css;

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