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

Question

Tworzenie strony na iPada Próbowałem użyć właściwości CSS overflow: auto, aby uzyskać paski przewijania, jeśli jest to konieczne, w div, ale moje urządzenie odmawia ich wyświetlania, nawet jeśli przewijają się dwa palce działa.

Próbowałem z

overflow: auto; 

i

overflow: scroll; 

a wynik jest taki sam.

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

Wszelkie pomysły?

Answer 1

Edit Poniżej komentarz lewo, uprzejmie, przez kritzikratzi:

[Uruchamianie] z iOS 5p nową właściwość -webkit-overflow-scrolling: touch można dodawać co powinno doprowadzić do oczekiwanego zachowania.

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

• Native momentum scrolling in iOS 5

---

Original odpowiedź, w lewo dla potomności.

Niestety, ani overflow: auto, ani scroll, nie produkuje pasków przewijania na urządzeniach z systemem iOS, najwyraźniej ze względu na szerokość ekranu, która byłaby zajęta takimi użytecznymi mechanizmami.

Zamiast tego, jak stwierdzono, użytkownicy muszą wykonać przesunięcie dwoma palcami, aby przewinąć zawartość o numerze overflow. Jedyne odniesienie, ponieważ nie mogę znaleźć instrukcji obsługi samego telefonu, mogę znaleźć tutaj: tuaw.com: iPhone 101: Two-fingered scrolling.

Jedyne obejście tego, o czym mogę pomyśleć, to czy można użyć JavaScript, a może jQTouch, aby stworzyć własne paski przewijania dla elementów overflow. Alternatywnie możesz użyć @media queries, aby usunąć overflow i pokazać zawartość w całości, jako użytkownik iPhone'a, który dostaje mój głos, choćby z czystej prostoty. Na przykład:

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

Poprzedzający kod pochodzi z A List Apart, z tego samego artykułu linkowane powyżej (nie jestem pewien, dlaczego oni po lewej stronie type="text/css", ale zakładam, że istnieją powody

Answer 2

The. iScroll4 biblioteka javascript naprawi je od razu. Posiada metodę hideScrollbar, którą można ustawić na false, aby zapobiec zniknięciu paska przewijania.

Answer 3

Rozwiązanie podane przez Chris Barr here

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

działa dobrze dla mnie. Usuń event.preventDefault, jeśli chcesz użyć niektórych kliknięć ...

Answer 4

Z mojego doświadczenia wynika, że ​​element musi mieć wartość display:block;, aby zadziałał element -webkit-overflow-scrolling:touch;.

Answer 5

Inne 2 osoby na SO zaproponowały możliwe rozwiązanie problemu tylko w CSS. Rozwiązanie Davida Thomasa jest idealne, ale ma ograniczenie, że pasek przewijania jest widoczny tylko podczas przewijania.

W celu przewijania zawsze widoczne, możliwe jest followin wytyczne sugerowane na poniższe linki:

• How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
• CSS - Overflow: Scroll; - Always show vertical scroll bar?

Answer 6

Zrobiłem kilka testów i za pomocą CSS3 przedefiniować paski przewijania działają, a użytkownik może zachować swoje skończyło się z 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óra jeszcze nie była w stanie dowiedzieć się, jak współdziałać z przewijania na iProducts ale można wchodzić w interakcje z treściami, aby przewinąć to

Answer 7

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

Answer 8

upewnić się, że ciało i DIV nie mają

position:fixed 

inaczej nie będzie działać

Answer 9

Jeśli próbujesz osiągnąć poziomą div przewijanie z dotyku na telefon komórkowy, zaktualizowany CSS fix nie działa (testowane na Android Chrome i iOS Safari wielu wersji), np:

-webkit-overflow-scrolling: touch 

Znalazłem rozwiązanie i zmodyfikowałem je do przewijania w poziomie z przed sztuczką CSS. Przetestowałem go w Androidzie Chrome i Safari na iOS, a wydarzenia dotykowe związane z słuchaczem trwały od dłuższego czasu, więc ma dobre wsparcie: http://caniuse.com/#feat=touch.

wykorzystania:

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

modyfikowany roztwór pionowej (przed CSS trickplay):

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

Answer 10

działa dobrze dla mnie, spróbuj:

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

Answer 11

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

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

użyć tego kodu, to działa w iOS/Android App webview; Usuwa część nieprzenośnego kodu css;