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?
Odpowiedzi:
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:
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ć
::-webkit-scrollbar
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ęć ...
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:
Z mojego doświadczenia wynika, że musisz upewnić się, że element display:block;zastosował się -webkit-overflow-scrolling:touch;do pracy.
::-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/