Разрабатывая веб-сайт для iPad, я попытался использовать свойство CSS overflow: autoдля получения полос прокрутки, если это необходимо, в a 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
Решение, данное Крисом Барром здесь
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/