2013-03-24 38 views
6

Tôi đang trong quá trình tạo trang web dành cho thiết bị di động đáp ứng. Khi thử nghiệm trên điện thoại của tôi, tôi nhận thấy rằng tôi không thể cuộn theo chiều dọc qua một cái gì đó có thể được cuộn theo chiều ngang."-webkit-overflow-scrolling: chạm" gây ra sự cố cuộn dọc trên thiết bị di động

Đây là một ví dụ về ý tôi (xin lỗi bạn không thể thấy cuộn ngang trên điện thoại của bạn mà chỉ tin tưởng rằng nó hoạt động).

Mobile Webkit trình duyệt không thể cuộn qua bảng trong ví dụ này: http://jsfiddle.net/tArEy/

Sau đó, tôi nhận xét ra các dòng sau để làm cho việc di chuyển dọc. Tuy nhiên, điều này làm cho di chuyển ngang một chút choppy.

-webkit-overflow-scrolling: touch; 

trình duyệt Webkit Mobile thể cuộn qua bảng trong ví dụ này, nhưng đó là một chút trục trặc hơn. http://jsfiddle.net/tArEy/1/

Có ai có ý tưởng về cách khắc phục điều này chỉ bằng CSS không?

Trình diễn phải được thử nghiệm trên trình duyệt. (Tôi đang chạy trình duyệt Chrome trên Android. Tôi cho rằng iPhone có cùng vấn đề).

Edit:

Nó chỉ ra rằng di chuyển theo chiều ngang là lỗi khủng khiếp trong các trình duyệt webkit điện thoại di động mà không cần dòng sau trong CSS của bạn:

-webkit-overflow-scrolling: touch; 

Tuy nhiên, dòng mà làm cho nó không thể di chuyển theo chiều dọc nên tôi bế tắc. Các trình duyệt không phải webkit khác cuộn theo chiều ngang tốt.

Chỉnh sửa 2:

tôi có bàn tay của tôi trên một iphone. quá trình cuộn tràn là phần cứng được tăng tốc và hoạt động hoàn hảo. Đây dường như chỉ là vấn đề về Chrome dành cho Android.

Trả lời

2

Đây là lỗi trong chrome dành cho Android. Nó đã được sửa trong một bản nâng cấp gần đây.

+1

Bạn có chắc chắn?Nó vẫn không hiệu quả với tôi. –

0

điều này có thể giúp giải quyết vấn đề: http://filamentgroup.github.com/Overthrow/ tràn-cuộn chỉ được hỗ trợ trong các điện thoại mới hơn. khi tôi đã thử nghiệm tôi đã nhìn thấy nếu điện thoại mới hơn có vấn đề di chuyển nhẹ hỗ trợ android 2.x và ios4 sẽ làm cho bạn khóc.

nếu bạn đang cuộn theo chiều ngang, bạn có thể muốn suy nghĩ lại về thiết kế của mình.

+0

Cảm ơn bạn đã liên kết, có vẻ thú vị. Tôi có thể cố gắng sửa đổi nó để loại bỏ một số tính năng mà tôi không cần. –

+0

(không chỉnh sửa kịp thời) Tôi chỉ cần cuộn theo chiều ngang trên một trang. Tôi có một bảng đầy đủ các thông tin hữu ích. Thiết kế bảng đáp ứng tốt duy nhất mà tôi đã xem là [http://www.zurb.com/playground/playground/responsive-tables/index.html](http://www.zurb.com/playground/playground này /responsive-tables/index.html). Như bạn có thể thấy, nó liên quan đến việc cuộn ngang. –

+0

Bạn nên thử Zurb sau đó. Đây là một viết lên trên nó: http://www.zurb.com/playground/responsive-tables – Jesse

Các vấn đề liên quan