Cuộn Bảng điều khiển di động JQuery tách biệt khỏi nội dung

Question

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.

Để 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?

Answer 1

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".

Answer 2

Đ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; 
    } 

Answer 3

.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; 

Answer 4

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

Answer 5

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/