Розробляючи веб-сайт iPad, я намагався скористатися властивістю CSS, overflow: autoщоб отримати смуги прокрутки, якщо це потрібно в div, але мій пристрій відмовляється показувати їх, навіть якщо прокрутка двома пальцями працює.
Я пробував з
overflow: auto;
і
overflow: scroll;
і результат однаковий.
Я тестую лише на iPad (у настільних браузерах працює ідеально).
Будь-які ідеї?
Відповіді:
Редагуйте за коментарем, залишеним, ласкаво, kritzikratzi :
[Починаючи] з ios 5beta можна додати нову властивість,
-webkit-overflow-scrolling: touchщо має призвести до очікуваної поведінки.
Дещо, але дуже мало, подальшого читання:
Оригінальна відповідь , залишена для нащадків.
На жаль, жодна з них 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, але ви можете взаємодіяти із вмістом, щоб прокрутити його
::-webkit-scrollbarне працює для iPhone 4 / iOS 7.
Рішення, наведене тут Крісом Барром
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, якщо вам потрібно скористатися деякими клацаннями ...
Інші 2 учасники програми SO запропонували можливе вирішення проблеми лише для CSS. Рішення Девіда Томаса ідеальне, але має обмеження, що смугу прокрутки видно лише під час прокрутки.
Щоб смуги прокрутки були завжди видимими, можна дотримуватися вказівок, запропонованих за такими посиланнями:
З мого досвіду ви повинні переконатися, що елемент display:block;подав заявку -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/