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

Question

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

Я пытался с

overflow: auto;

и

overflow: scroll;

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

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

Есть идеи?

Answer 1

Редактировать после комментария, любезно, kritzikratzi :

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

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

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

---

Original answer, left for posterity.

Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.

Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: прокрутка с двумя пальцами .

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

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

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

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

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

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

Answer 5

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

  position:fixed

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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

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