Tự động hoàn thành giao diện người dùng JQuery không cuộn bằng các phím mũi tên trong Firefox

Question

Tôi đang làm việc với giao diện người dùng JQuery tự động hoàn tất 1.8 với JQuery 1.6.1. (Bắt các phiên bản phần mềm mới hơn là vô cùng khó khăn trong công ty của tôi vì vậy tôi bị mắc kẹt với những điều này.)

Tôi có một danh sách dài các chuỗi được đặt trong ngăn tự động hoàn thành, vì vậy tôi đã tạo kiểu cho lớp .ui-autocomplete như thế này

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;} 

Bây giờ khi trình đơn thả xuống tự động hoàn tất bật lên, nó có thanh cuộn như mong muốn. Tuy nhiên, khi tôi sử dụng các phím mũi tên để điều hướng menu thả xuống, bảng điều khiển sẽ không cuộn với vùng chọn. Các lựa chọn vẫn xảy ra. Cuối cùng tôi chạy ra khỏi dưới cùng của danh sách và con trỏ được trả về đầu trang. Mọi thứ hoạt động như mong đợi ngoại trừ khung cuộn không cuộn.

Trong các thử nghiệm ngoài công việc mà tôi có quyền truy cập vào các trình duyệt khác, tôi thấy rằng chrome cuộn chính xác và IE 8 cuộn đúng cách. Đây có phải là một lỗi với trình duyệt Firefox 3.6 firefox hoặc tôi thiếu một cái gì đó?

Tôi bị còng tay vào Firefox 3.6 ua: (Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv1.9.2.12) Gecko/20.101.026 Firefox/3.6.1.2)

Đây có phải là lỗi với phiên bản trình duyệt này hay không, tôi có thiếu gì đó không?

EDIT: Tôi đã có thể tìm thấy một máy có ie6 và một với firefox 3.5.3. ie6 cuộn và firefox 3.5.3 thì không. Dường như nó có thể là một vấn đề với firefox.

Answer 1

Tôi gặp sự cố tương tự với ứng dụng đang chạy trên jQuery v1.7.2 và jQuery UI v1.8.11 trên bất kỳ trình duyệt nào. Tuy nhiên tôi đã phát hiện ra rằng nó đã được sửa trên jQuery UI v1.8.13 changelog.

Vì vậy, theo sửa chữa trong changeset, tất cả những gì tôi đã làm là chỉ ghi đè lên hai chức năng như dưới đây và nó khắc phục vấn đề.

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, { 
activate: function (event, item) { 
    this.deactivate(); 
    if (this.hasScroll()) { 
     var offset = item.offset().top - this.element.offset().top, 
      scroll = this.element.scrollTop(), 
      elementHeight = this.element.height(); 
     if (offset < 0) { 
      this.element.scrollTop(scroll + offset); 
     } else if (offset >= elementHeight) { 
      this.element.scrollTop(scroll + offset - elementHeight + item.height()); 
     } 
    } 
    this.active = item.eq(0) 
         .children("a") 
         .addClass("ui-state-hover") 
         .attr("id", "ui-active-menuitem") 
         .end(); 
    this._trigger("focus", event, { item: item }); 
}, 

hasScroll: function() { 
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight"); 
}})); 

Answer 2

Giải pháp: Nâng cấp lên giao diện người dùng jQuery 1.8.18 đã khắc phục sự cố này cho tôi.

Đây không phải là câu trả lời nhưng nó có thể cung cấp thêm thông tin về vấn đề này. Nếu bạn làm theo các cuộc gọi khi bạn bấm các phím lên hoặc xuống khi menu được mở, bạn sẽ nhận được phương thức kích hoạt của tiện ích menu gọi phương thức hasScroll (Line 5487 sử dụng v1.8.11);

hasScroll: function() { 
    return this.element.height() < this.element.attr("scrollHeight"); 
}, 

Có vẻ như vấn đề là thuộc tính scrollHeight không được xác định cho phần tử ul menu và do đó phương thức này luôn trả về giá trị sai.

Dưới đây là phương pháp kích hoạt:

activate: function(event, item) { 
     this.deactivate(); 
     if (this.hasScroll()) { 
      var offset = item.offset().top - this.element.offset().top, 
       scroll = this.element.attr("scrollTop"), 
       elementHeight = this.element.height(); 
      if (offset < 0) { 
       this.element.attr("scrollTop", scroll + offset); 
      } else if (offset >= elementHeight) { 
       this.element.attr("scrollTop", scroll + offset - elementHeight + item.height()); 
      } 
     } 
     this.active = item.eq(0) 
      .children("a") 
       .addClass("ui-state-hover") 
       .attr("id", "ui-active-menuitem") 
      .end(); 
     this._trigger("focus", event, { item: item }); 
    } 

Thậm chí nếu bạn buộc các phương pháp hasScroll để trở về đúng, bạn chạy vào một vấn đề khác như các thuộc tính scrollTop không được định nghĩa một trong hai.

Tôi sẽ cho bạn biết nếu tôi tìm ra giải pháp cho điều này vì nó cũng đang làm hỏng đơn đăng ký của tôi.

Answer 3

tôi nhận thấy rằng this.element.attr("scrollHeight") trong

hasScroll: function() { 
     return this.element.height() < this.element.attr("scrollHeight"); 
    }, 

lợi nhuận không xác định. Nếu bạn thay đổi this.element.attr("scrollHeight") thành this.element.prop("scrollHeight") thay vào đó, bạn sẽ nhận được scrollHeight.

Nhưng sau đó cùng một vấn đề xuất hiện trong activate: function (event, item) {, vì vậy bạn cũng cần phải thay đổi tất cả các lần xuất hiện của

this.element.attr("scrollTop")-this.element.prop("scrollTop")

trong chức năng đó cũng như để làm cho nó làm việc.

Bạn có thể đọc về .prop() in the jQuery API nhưng về cơ bản lý do cho điều này là

Trước jQuery 1.6, phương pháp .attr() đôi khi mất giá trị tài sản vào tài khoản khi lấy một số thuộc tính, mà có thể gây ra hành vi không phù hợp. Kể từ jQuery 1.6, phương thức .prop() cung cấp một cách để truy lục một cách rõ ràng các giá trị thuộc tính, trong khi .attr() truy lục các thuộc tính.