Jak uzyskać pasek przewijania z przepełnieniem CSS na iOS

Tworząc witrynę na iPada, próbowałem użyć właściwości CSS, overflow: autoaby uzyskać paski przewijania w razie potrzeby w a div, ale moje urządzenie odmawia ich wyświetlenia, nawet jeśli działa przewijanie dwoma palcami.

Próbowałem z

overflow: auto;

i

overflow: scroll;

a wynik jest taki sam.

Testuję tylko na iPadzie (na przeglądarkach stacjonarnych działa idealnie).

Jakieś pomysły?

Edytuj po komentarzu pozostawionym uprzejmie przez kritzikratzi :

[Zaczynając] od ios 5beta -webkit-overflow-scrolling: touchmożna dodać nową właściwość, która powinna spowodować oczekiwane zachowanie.

Niektóre, ale bardzo mało, dalsze czytanie:

• Natywne przewijanie pędu w iOS 5

Oryginalna odpowiedź , pozostawiona dla potomności.

Niestety ani jedno overflow: auto, ani drugiescroll produkują pasków przewijania na urządzeniach iOS, najwyraźniej ze względu na szerokość ekranu, która byłaby zajęta przez tak przydatne mechanizmy.

Zamiast tego, jak odkryłeś, użytkownicy są zobowiązani do wykonania przesunięcia dwoma palcami, aby przewinąć overflowzawartość. Jedyne odniesienie, ponieważ nie mogę znaleźć instrukcji do samego telefonu, znalazłem tutaj: tuaw.com: iPhone 101: Przewijanie dwoma palcami .

Jedyne obejście, jakie przychodzi mi do głowy, to użycie JavaScript, a może i jQTouch, do stworzenia własnych pasków przewijania dla overflowelementów. Alternatywnie możesz użyć zapytań @media, aby usunąć overflowi wyświetlić zawartość w całości, jako użytkownik iPhone'a dostaje to mój głos, choćby dla samej prostoty. Na przykład:

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

Poprzedni kod pochodzi z A List Apart , z tego samego artykułu, do którego link znajduje się powyżej (nie jestem pewien, dlaczego zostawili go type="text/css", ale zakładam, że są powody.

Zastosuj ten kod w swoim 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);
}

Przeprowadziłem kilka testów i użyłem CSS3 do ponownego zdefiniowania pasków przewijania, a Ty zachowasz swój Overflow:scroll;lubOverflow:auto

Skończyło się na czymś takim ...

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

Jedyną wadą, której jeszcze nie byłem w stanie zrozumieć, jest interakcja z paskami przewijania w iProducts, ale możesz wchodzić w interakcje z zawartością, aby ją przewijać

Rozwiązanie podane przez Chrisa Barra tutaj

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

U mnie działa dobrze. Usuń event.preventDefault, jeśli potrzebujesz użyć kilku kliknięć ...

IScroll4 biblioteki javascript będzie go naprawić aż. Ma hideScrollbarmetodę, którą możesz ustawić, falseaby zapobiec zniknięciu paska przewijania.

Inne 2 osoby z SO zaproponowały możliwe rozwiązanie problemu, obejmujące tylko CSS. Rozwiązanie Davida Thomasa jest doskonałe, ale ma ograniczenie polegające na tym, że pasek przewijania jest widoczny tylko podczas przewijania.

Aby paski przewijania były zawsze widoczne, można postępować zgodnie ze wskazówkami sugerowanymi pod poniższymi linkami:

• Jak mogę zapobiec ukrywaniu pasków przewijania dla użytkowników gładzika OS X w oprogramowaniu WebKit / Blink?
• CSS - Overflow: Scroll; - Zawsze pokazuj pionowy pasek przewijania?

upewnij się, że twoje body i divy nie mają pliku

  position:fixed

inaczej by się nie udało

Z mojego doświadczenia wynika, że ​​musisz upewnić się, że element display:block;zastosował się -webkit-overflow-scrolling:touch;do pracy.

U mnie działa dobrze, spróbuj:

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

Użyj tego kodu, działa w przeglądarce internetowej aplikacji ios / android; Usuwa jakiś nieprzenośny kod css;

Jeśli próbujesz osiągnąć przewijanie w poziomie zadiv pomocą dotyku na telefonie komórkowym, zaktualizowana poprawka CSS nie działa (testowana na wielu wersjach Androida Chrome i iOS Safari), np .:

-webkit-overflow-scrolling: touch

Znalazłem rozwiązanie i zmodyfikowałem je do przewijania poziomego sprzed sztuczki CSS. Przetestowałem go na Androidzie Chrome i iOS Safari, a zdarzenia dotykowe słuchacza były już od dłuższego czasu, więc ma dobre wsparcie: http://caniuse.com/#feat=touch .

Stosowanie:

touchHorizScroll('divIDtoScroll');

Funkcje:

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

Zmodyfikowane z rozwiązania pionowego (sztuczka przed CSS):

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