Tại sao đôi khi scrollTop/scrollLeft không ghi được?

Question

Tôi đang sử dụng thành phần Giao diện người dùng biểu đồ Dhtmlx Gantt có danh sách nhiệm vụ và biểu đồ đồ họa. Danh sách nhiệm vụ và biểu đồ đồ họa được chứa trong hai phần tử div riêng biệt được đồng bộ hóa để cuộn song song. Bằng cách di chuyển khu vực biểu đồ, danh sách nhiệm vụ được tự động cuộn kết quả vị trí hàng nhiệm vụ phù hợp với vị trí dòng Gantt.

Kiểm tra mã nguồn thành phần, tôi thấy đồng bộ được thực hiện bởi các đoạn mã sau:

this.oData.onscroll = function() { 
    self.panelTime.scrollLeft = this.scrollLeft; 
    self.panelNames.scrollTop = this.scrollTop; 
}; 

Tất cả đánh dấu HTML trong việc kiểm soát giao diện người dùng được tạo động bởi JavaScript. Tất cả đều hoạt động tốt, ngoại trừ việc mất quá nhiều thời gian để hiển thị danh sách tác vụ 800-ish.

Để cải thiện thời gian hiển thị, tôi quyết định xây dựng mô-đun hiển thị bên máy chủ của riêng mình để tạo đánh dấu HTML giống với phía máy khách được tạo ban đầu. Đánh dấu này được lấy từ phía máy khách bằng cách sử dụng jquery $ .get() thông thường và được tiêm vào trang bằng cách sử dụng $ (el) .html(). Sau đó, tôi đặt trình xử lý sự kiện cần thiết làm phiên bản phía máy khách gốc.

Vấn đề bây giờ là cuộn song song không hoạt động. Tôi có thể nắm bắt các sự kiện di chuyển trên khu vực biểu đồ, nhưng tôi không thể thiết lập thuộc tính scrollTop của khu vực danh sách nhiệm vụ. Tôi thử nghiệm trong firebug để buộc tài sản scrollTop theo cách thủ công, nhưng giá trị không thay đổi. Dường như thuộc tính scrollTop là chỉ đọc.

Có giải thích nào cho vấn đề này không?

Answer 1

Bạn không thể cuộn xuống dưới đáy (hoặc qua bên phải) nội dung của phần tử. Nếu phần tử có overflow: visible (mặc định) hoặc ít nhất là nội dung của nó thì cả thuộc tính cuộn sẽ bị kẹt ở 0. Tương tự, ngay cả khi có nội dung ẩn để cuộn vào chế độ xem thì bạn sẽ không thể để cuộn qua cuối; nếu bạn đặt scrollTop hoặc scrollLeft thành giá trị lớn hơn ý nghĩa, nó sẽ giảm xuống giá trị lớn nhất có ý nghĩa.

Tôi đoán là trong trường hợp của bạn, bạn đang cố gắng di chuyển div trước khi nội dung của nó được tải và từ chối cuộn vì không có gì để cuộn vào chế độ xem.