Đang phát triển trang web iPad Tôi đã cố gắng sử dụng thuộc tính CSS overflow: autođể lấy các thanh cuộn nếu cần trong a div, nhưng thiết bị của tôi từ chối hiển thị chúng ngay cả khi cuộn hai ngón tay đang hoạt động.
Tôi đã thử với
overflow: auto;
và
overflow: scroll;
và kết quả là như nhau.
Tôi chỉ đang thử nghiệm trên iPad (trên các trình duyệt trên máy tính để bàn hoạt động hoàn hảo).
Có ý kiến gì không?
Câu trả lời:
Chỉnh sửa sau nhận xét để lại, vui lòng, bởi kritzikratzi :
[Bắt đầu] với ios 5beta một thuộc tính mới
-webkit-overflow-scrolling: touchcó thể được thêm vào, điều này sẽ dẫn đến hành vi như mong đợi.
Một số, nhưng rất ít, đọc thêm:
Câu trả lời ban đầu , để lại cho hậu thế.
Thật không may overflow: auto, không hoặc scroll, không tạo thanh cuộn trên các thiết bị iOS, rõ ràng là do chiều rộng màn hình sẽ sử dụng các cơ chế hữu ích như vậy.
Thay vào đó, như bạn đã tìm thấy, người dùng được yêu cầu thực hiện thao tác vuốt bằng hai ngón tay để cuộn overflownội dung được đánh dấu. Tài liệu tham khảo duy nhất, vì tôi không thể tìm thấy hướng dẫn sử dụng cho chính chiếc điện thoại, tôi có thể tìm thấy ở đây: tuaw.com: iPhone 101: Cuộn hai ngón .
Giải pháp duy nhất mà tôi có thể nghĩ đến cho việc này, là nếu bạn có thể sử dụng một số JavaScript, và có thể là jQTouch, để tạo thanh cuộn của riêng bạn cho overflowcác phần tử. Ngoài ra, bạn có thể sử dụng truy vấn @media để xóa overflowvà hiển thị đầy đủ nội dung, với tư cách là người dùng iPhone, điều này sẽ nhận được phiếu bầu của tôi, nếu chỉ vì sự đơn giản tuyệt đối. Ví dụ:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
Mã trước đến từ A List Ngoài , từ cùng một bài viết được liên kết đến ở trên (Tôi không chắc tại sao họ rời khỏi type="text/css", nhưng tôi cho rằng có lý do.
Áp dụng mã này trong css của bạn
::-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);
}
Tôi đã thực hiện một số thử nghiệm và sử dụng CSS3 để xác định lại hoạt động của thanh cuộn và bạn có thể giữ Overflow:scroll;hoặcOverflow:auto
Tôi đã kết thúc với một thứ như thế này ...
::-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);
}
Mặt cuối cùng mà tôi chưa thể tìm ra là cách tương tác với các thanh cuộn trên iProducts nhưng bạn có thể tương tác với nội dung để cuộn nó
::-webkit-scrollbarkhông làm việc cho iPhone 4 / iOS 7.
Giải pháp được đưa ra bởi Chris Barr tại đây
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);
}
}
Hoạt động tốt cho tôi. Xóa event.preventDefault nếu bạn cần sử dụng một số nhấp chuột ...
2 người khác trên SO đã đề xuất giải pháp khả thi chỉ có CSS cho vấn đề. Giải pháp của David Thomas là hoàn hảo nhưng có giới hạn là thanh cuộn chỉ hiển thị trong khi cuộn.
Để thanh cuộn luôn hiển thị, bạn có thể làm theo các nguyên tắc được đề xuất trên các liên kết sau:
Theo kinh nghiệm của tôi, bạn cần đảm bảo rằng phần tử đã display:block;được áp dụng -webkit-overflow-scrolling:touch;để hoạt động.
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
Sử dụng mã này, nó hoạt động trong ios / android APP webview; Nó xóa một số mã css không di động;
Nếu bạn đang cố gắng đạt được chiều ngangdiv cuộn bằng cách chạm trên thiết bị di động, thì bản sửa lỗi CSS được cập nhật không hoạt động (đã thử nghiệm trên Android Chrome và iOS Safari nhiều phiên bản), ví dụ:
-webkit-overflow-scrolling: touch
Tôi đã tìm thấy giải pháp và sửa đổi nó để cuộn ngang từ trước khi có mẹo CSS. Tôi đã thử nghiệm nó trên Android Chrome và iOS Safari và các sự kiện chạm vào người nghe đã có từ lâu, vì vậy nó có hỗ trợ tốt: http://caniuse.com/#feat=touch .
Sử dụng:
touchHorizScroll('divIDtoScroll');
Chức năng:
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;
}
}
Được sửa đổi từ giải pháp dọc (thủ thuật trước CSS):
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/