2011-12-01 34 views
17

Tôi đang sử dụng iScroll4 và nó hoạt động rất tốt!iScroll sẽ không cho phép các mục được nhấp vào

Đây là những chức năng tôi sử dụng để init, làm mới và kết thúc iScroll:

function iniciarIscroll(){ 
    /*En ie7 no lo usamos*/ 
    if(!ie7){ 
     $(document).ready(function() { 
      myScroll1 = new iScroll('nvl1'); 
      myScroll2 =new iScroll('nvl2'); 
      /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
      document.addEventListener('DOMContentLoaded', setTimeout(function() { loaded(); }, 200), false);*/ 
     }); 
    } 
    return false; 
} 

function refrescarIscroll(){ 
    if(!ie7){ 
     myScroll1.refresh(); 
     myScroll2.refresh(); 
    } 
    return false; 
} 


function terminarIscroll(){ 
    if(!ie7){ 
     myScroll1.destroy(); 
     myScroll1 = null; 
     myScroll2.destroy(); 
     myScroll2 = null; 
    } 
    return false; 
} 

Vấn đề là nó sẽ không cho phép <a> hoặc <input> hoặc bất cứ điều gì để được bấm (hoặc tập trung, tôi không chắc chắn) ; cũng css: di chuột hoặc: tiêu điểm sẽ không được áp dụng; nhưng nó sẽ kích hoạt các sự kiện trong javascript như

.hover() or .click() 

Bất kỳ ý tưởng nào để giải quyết vấn đề này nếu có thể?

+2

bất kỳ cơ hội đưa điều này vào một fiddle vì vậy chúng tôi có thể gặp sự cố trong hành động? đây là một để giúp bạn bắt đầu ... http://jsfiddle.net/zander/AHEuC/ – JorgeLuisBorges

+0

Chủ đề này có thể được sao chép với http://stackoverflow.com/questions/5745374/iscroll-4-problem-with-form- select-element-iphone-safari-and-android-browser; nó sẽ giúp bạn ra –

Trả lời

10

Tác giả đã nhận xét rằng khả năng tương thích của biểu mẫu là không ổn định - đó là vấn đề đã biết và anh ấy đang khắc phục phiên bản tiếp theo. Một người nào khác đã nhận xét trong các diễn đàn:

Do v4.1.9, hỗ trợ cho các trường biểu mẫu vẫn đang được phát triển. Bạn có thể làm cho nút radio và hộp kiểm hoạt động bằng cách gói trong nhãn (gói có vẻ hoạt động tốt hơn có thể hơn là sử dụng cú pháp = "").

Liên kết phải ổn và hoạt động trong bản trình diễn được cung cấp. Bạn đã nhận xét cuộc gọi e.preventDefault() trong tập lệnh init của bạn vốn là thủ phạm thông thường. Có lẽ vấn đề về tính tương thích của biểu mẫu cũng ảnh hưởng đến các liên kết?

Đối với sự kiện di chuột, từ những gì tôi có thể nói điều này sẽ được kích hoạt khi một yếu tố được khai thác.

Hy vọng rằng sẽ giúp ích một chút. Kịch bản trường hợp xấu nhất - xóa mã của bạn và bắt đầu với một trang demo từ dự án, thích ứng với nhu cầu của bạn một dòng tại một thời điểm và tiếp tục thử nghiệm nó. Bạn sẽ sớm biết sửa đổi nào phá vỡ hành vi dự định.

2

Một công việc xung quanh tôi đã sử dụng là "đóng băng" iscroll khi tôi muốn người dùng có thể thực hiện chỉnh sửa. Sự không tương thích mà iScroll có với các yếu tố đầu vào có liên quan như xa như tôi có thể nói với các biến đổi css kết hợp với sự hỗ trợ cảm ứng nó áp dụng cho các nội dung trong cuộn. Nếu bạn tạm thời vô hiệu hóa trình cuộn, bạn có thể cho phép người dùng nhập vào các giá trị. Bí quyết là đảm bảo vị trí cuộn hiện tại của nội dung được giữ nguyên khi tắt. Khi "cố định", người dùng có thể cập nhật các yếu tố đầu vào trong vùng hiển thị. Nhược điểm là các cuộn không cuộn trong trạng thái này. Bạn sẽ phải rã đông nó trên một số sự kiện.

tôi đã thêm các chức năng cho iScroll.prototype để làm cho công việc này:

_get_current_scroll_px: function (transformStyle) { 
    //return the first string that looks like an integer, that should be the x translation 
    return /[\-0-9]+px/.exec(transformStyle)[0]; 
}, 


freeze: function() { 
    this.disable(); 
    this.savedStyle = this.scroller.style[vendor + 'Transform']; 
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller 
    this.scroller.style[vendor + 'Transform'] = ''; 
}, 

thaw: function() { 
    this.scroller.style[vendor + 'Transform'] = this.savedStyle; 
    this.scroller.style['marginLeft'] = '0'; 
    this.enable(); 
} 

Calling hoặc đóng băng nó sẽ trông giống như:

//user triggered event causes freeze 
yourFreezeEventCallback: function() { 
    myScroll1.freeze(); 
    //now user can use visible inputs on screen 
} 

Làm tan nó sẽ trông giống như:

//user triggered event causes thaw 
yourThawEventCallback: function() { 
    myScroll1.thaw(); 
    //now scrolling is back and inputs can no longer be edited or in focus 
} 

Rõ ràng, bạn sẽ cần phải tích hợp điều này vào dự án của riêng bạn bằng cách nào đó nhưng nó đã làm việc cho tôi. Nó không phải là lý tưởng vì vậy tôi mong muốn được cập nhật iScroll. Cảnh báo: đây không phải là thử nghiệm trong IE vì vậy tôi sẽ không xác nhận cho nó ở đó. Tôi hy vọng điều này là ít nhất là một khởi đầu để giúp bạn có được một công việc xung quanh.

2

Khi lần đầu tiên phát hiện iScroll, tôi nghĩ đó là giải pháp cho nhiều vấn đề của tôi. Sau đó, vấn đề này bit tôi thời gian lớn.Trong khi cố tìm cách giải quyết, tôi đã đưa ra this pull request.

Có một lưu ý về yêu cầu kéo khác, tốt hơn, giải pháp đã được tìm thấy mặc dù tôi không chắc chắn yêu cầu kéo được/được cho là để khắc phục vấn đề. Tôi sẽ xem liệu tôi có thể nhận được thông tin chi tiết hơn từ tác giả của ghi chú đó hay không.

Cập nhật: Yêu cầu kéo liên quan có thể được tìm thấy here. Tôi chưa có cơ hội để thử nghiệm nó (Tôi hy vọng sẽ xác nhận hỗ trợ Android sau ngày hôm nay.)

0

Tôi cũng đang nỗ lực làm cho mọi thứ cuộn trơn tru trong môi trường di động và iscroll là một trong những thư viện tôi đã xem xét tìm kiếm của tôi cho đúng công cụ. Các câu trả lời khác đã gợi ý cách bạn có thể khắc phục sự cố cụ thể của mình nhưng tôi thực sự khuyên bạn nên sử dụng hoặc scrollability (bởi Joe Hewitt) hoặc touchscroll (bởi David Aurelio). Tôi nghĩ rằng di chuyển thực sự cung cấp cảm giác tốt nhất nhưng nó không thực sự được thực hiện và bạn sẽ phải đối mặt với các vấn đề tương tự hoặc tương tự. Tôi là cá nhân sử dụng touchscroll cho một dự án của tôi và tôi khuyên bạn nên nó.

Tôi phải đặt các hành động nhấp và kiểm tra thời gian chờ tùy chỉnh khi tôi thử nghiệm với iscroll cách đây vài tuần trong dự án của mình và tôi đã làm như vậy bằng cách nhận xét e.preventDefault() khi bắt đầu chạm và chèn một số các chức năng của riêng tôi để nắm bắt khi nó thực sự cuộn. Trái tim của họ, tất cả các thư viện đều hoạt động theo cùng một cách (bắt các sự kiện và ngăn chặn chúng, chạy các biến đổi css để làm mượt mà hơn các hoạt ảnh vẽ lại DOM, sau đó giả tạo bất kỳ sự kiện nào cần được kích hoạt). Điều này có nghĩa là cách khác bạn có thể khắc phục sự cố là tìm khi nào sự kiện nhấp chuột cho các yếu tố cụ thể của bạn sẽ xảy ra và kích hoạt nó theo cách thủ công trong mã. Trong touchscroll nó lắng nghe cho các sự kiện trên các yếu tố trên cùng để bạn có thể ghi đè lên hành vi bằng cách đơn giản dừng bubbling ... Tôi không thể nhớ nếu iscroll làm như vậy.

Điều này (cảm giác mượt mà, bản địa, hoạt ảnh trên thiết bị di động) vẫn là một khu vực nằm ở rìa các công nghệ khác nhau nên chưa có ai có giải pháp hoàn chỉnh. Tôi mong đợi trong một vài năm, điện thoại di động được cải thiện để các trình duyệt di động chỉ xử lý các sự kiện cuộn một cách tự nhiên nhưng cho đến lúc đó chúng tôi buộc phải hack các giải pháp như thế này. Chúc may mắn!

19

Bạn chỉ cần thực hiện thay đổi này trong bộ nạp của iscroll:

Thay đổi dòng này:

myScroll = new iScroll('wrapper'); 

Đối với điều này:

myScroll = new iScroll('wrapper', { 
useTransform: true, 
zoom: false, 
onBeforeScrollStart: function (e) { 
var target = e.target; 
while (target.nodeType != 1) target = target.parentNode; 

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 
e.preventDefault(); 
} 
}); 
+0

Điều này cố định nó cho tôi, và đã được khá một giải pháp dễ dàng để thực hiện –

+0

@yenssen cảm ơn rất nhiều! Sửa lỗi của tôi và đang hoạt động tốt;) – punkbit

+1

không hoạt động đối với tôi, không có sự khác biệt nào –

12
// Setup myScroll 
    myScroll = new IScroll('#wrapper', { 
    scrollX: horizontalSwipe, 
    scrollY: !horizontalSwipe, 
    momentum: false, 
    snap: document.querySelectorAll('#scroller .slide'), 
    snapSpeed: 400, 
    bounceEasing: 'back', 
    keyBindings: true, 
    click: true 
    }); 

Đối với tôi, tôi chỉ cần thêm nhấp chuột: true trên dòng cuối cùng ... Đã dành cả ngày gỡ lỗi và triển khai tất cả các giải pháp được đề xuất không có ích ...

+1

'click: true' giải quyết được vấn đề của tôi không thể nhấp vào liên kết bên trong khung iscroll trên iPad. Nó sẽ di chuột nhưng không nhấp. –

0

Lỗi trình duyệt Android là kết quả của phiên bản rất cũ của WebKit bên trong Android, ngay cả bên trong Android 4.3. Nguyên nhân gốc của lỗi - xử lý sai sự kiện nhấp chuột mà iScroll gửi trở lại trình duyệt (loại bỏ preventDefault chỉ dừng gửi sự kiện nhấp chuột này) Trình duyệt Chrome của Android không bị lỗi này vì nó đã nâng cấp thư viện WebKit bên trong.

Đang chờ nâng cấp Android WebKit từ Google.

0

bình luận ra

position:absolute; 

tại #pageWrapper trong styles.css

Trong trường hợp của tôi, điều này đã giải quyết được vấn đề không thể nhấp vào ở trên.

0

Hãy thử điều này

myScroll = new IScroll('#wrapper', { click: true }); 
Các vấn đề liên quan