2013-04-30 11 views
16

Tôi đang làm việc trên ứng dụng di động HTML 5 bằng cách sử dụng JQuery Mobile. Thiết kế yêu cầu trình đơn thanh bên có thể cuộn độc lập với nội dung chính, ví dụ: bạn có thể cuộn một nơi nào đó trên trang, mở menu và cuộn trong menu đó mà không cần cuộn nội dung trang.Cuộn Bảng điều khiển di động JQuery tách biệt khỏi nội dung

Để triển khai thực đơn, các trang trình bày JQuery Mobile là một lựa chọn hiển nhiên. Tuy nhiên, tôi đã không thể khiến họ cuộn riêng khỏi nội dung.

Tôi đã thử sử dụng iScroll 4 có và không có plugin iScrollView để cuộn trang trình bày JQuery Mobile, nhưng cuộn không hoạt động trong bảng điều khiển, chỉ trên các phần tử trong nội dung trang. Nội dung của bảng điều khiển có thể được đẩy và kéo, nhưng sẽ quay trở lại vị trí bắt đầu của nó (hiệu ứng "ban nhạc cao su").

Tôi cũng đã thử sử dụng jScroll để nhắm mục tiêu div được tạo bởi điện thoại di động JQuery (".ui-panel-inner"), nhưng có cùng kết quả.

Gọi refresh() trên đối tượng iScroll sau khi hiển thị bảng điều khiển cũng không hoạt động.

Tôi sắp quên sử dụng các bảng trượt JQuery Mobile được tích hợp sẵn để thực hiện công việc này, có ai biết giải pháp để cuộn bảng điều khiển JQuery Mobile độc ​​lập khỏi div nội dung không?

Trả lời

4

Tôi có trường hợp tương tự với bạn. Tôi cần một menu tĩnh ở bảng điều khiển bên trái. Tôi không muốn bảng điều khiển, cuộn.

Sau đó, tôi sử dụng data-position-fixed="true".

+4

nó không làm việc cho tôi ... – rkaartikeyan

+0

Tôi tin rằng điều này giải quyết vấn đề ngược lại - di chuyển trang trong khi sửa chữa bảng điều khiển. –

21

Điều này khiến tôi phát điên. Tôi đã sử dụng các giải pháp trên this forum response

Thêm CSS này sau khi stylesheet JQueryMobile:

.ui-panel.ui-panel-open { 
     position:fixed; 
    } 
    .ui-panel-inner { 
     position: absolute; 
     top: 1px; 
     left: 0; 
     right: 0; 
     bottom: 0px; 
     overflow: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 
+0

Nó luôn hiển thị thanh cuộn ngay cả khi nó không tràn như thế nào tôi có thể giải quyết điều này. –

+0

Giải pháp này không hiệu quả đối với tôi. Nếu bạn có tràn trang và bảng điều khiển chính, cả hai sẽ cuộn. –

+3

Đảm bảo thêm một phần tử có lớp 'ui-panel-inner', khiến các phần tử không được chèn theo mặc định –

7
.ui-panel.ui-panel-open { 
    position:fixed; 
} 
.ui-panel-inner { 
    position: absolute; 
    top: 1px; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

Đây là giải pháp được cung cấp bởi Alison Tinker. Để ngăn Scroll hiển thị khi không có gì để cuộn, thay đổi;

overflow: scroll; 

để

overflow: auto; 
0

Tôi nghĩ rằng bạn phải sửa nội dung khi bảng điều khiển được mở

để kiểm tra xem bảng điều khiển mở cửa, u đã lớp này thêm vào BODY .ui- panel.ui-panel-open

Bạn phải đặt vị trí: cố định! vào .ui-panel-wrapper dưới .ui-panel.ui-panel-open

0

Vui lòng tham khảo giải pháp của tôi bằng cách sử dụng cài đặt css động được kích hoạt với panelbeforeopen/panelbeforđóng bằng cách sử dụng bảng định kiểu trên cho bảng điều khiển bên trong.

$(document).on("panelbeforeopen", "#panel", function() { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function() { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

dán chân update:

http://jsfiddle.net/u92m7u2n/