ScrollIntoView có hoạt động trên tất cả các trình duyệt không?

Question 1

Có scrollIntoView()hoạt động trên tất cả các trình duyệt không? Nếu không có một giải jQuerypháp thay thế?

Question 2

Nó được hỗ trợ là có, nhưng trải nghiệm người dùng thì ... tệ.

Như @ 9bits đã chỉ ra, điều này từ lâu đã được tất cả các trình duyệt chính hỗ trợ . Không phải lo lắng về điều đó. Vấn đề chính là cách nó hoạt động. Nó chỉ đơn giản là chuyển đến một phần tử cụ thể cũng có thể nằm ở cuối trang. Bằng cách chuyển đến nó, người dùng không biết liệu:

trang đã được cuộn lên
trang đã được cuộn xuống
họ đã được chuyển hướng đến nơi khác

Hai đầu tiên có thể được xác định bằng vị trí cuộn, nhưng ai nói rằng người dùng đã theo dõi vị trí cuộn trước khi thực hiện bước nhảy? Vì vậy, đó là một hành động không xác định.

Điều cuối cùng có thể đúng, đặc biệt nếu trang có tiêu đề chuyển động bị cuộn ra khỏi chế độ xem và thiết kế trang còn lại không ngụ ý bất kỳ điều gì về việc ở trên cùng một trang (nếu nó cũng không có bất kỳ phần tử chiều dọc tổng chiều cao nào như menu bên trái quán ba). Bạn sẽ ngạc nhiên khi có bao nhiêu trang có vấn đề này. chỉ cần tự mình kiểm tra chúng. Đi tới một số trang, xem nó ở trên cùng, sau đó nhấnEnd phím và xem lại nó. Có khả năng bạn sẽ nghĩ đó là một trang khác.

`scrollintoview`Plugin jQuery hoạt hình để giải cứu

Đó là lý do tại sao vẫn có các plugin thực hiện cuộn vào chế độ xem thay vì sử dụng chức năng DOM gốc. Chúng thường tạo hoạt ảnh cuộn để loại bỏ tất cả 3 vấn đề được nêu ở trên. Người dùng có thể dễ dàng theo dõi các chuyển động.

Question 3

Có vẻ như nó có: http://www.quirksmode.org/dom/w3c_cssom.html

Question 4

Tôi sử dụng iScroll-4 của Matteo Spinnelli và nó cũng hoạt động trong iOS safari. Nó có ba phương thức scrollTo, scrollToElement và scrollToPage. Giả sử bạn có một danh sách các phần tử không có thứ tự được bao bọc bên trong một div. Như Robert Koritnik đã viết ở trên, bạn cần có hoạt ảnh nhẹ đó để cho thấy rằng bạn đã cuộn. Phương pháp dưới đây đạt được hiệu quả đó.

scrollToElement(element, time);

Question 5

Chưa thử điều này, nhưng có vẻ như cõng trên chức năng scrollIntoView tích hợp sẽ tiết kiệm được nhiều mã. Đây là những gì tôi sẽ làm nếu bạn muốn hành động hoạt hình:

Lưu vào bộ nhớ cache vị trí cuộn hiện tại của vùng chứa dưới dạng START POSITION
chạy được xây dựng trong scrollIntoView
Lưu vào bộ nhớ cache vị trí cuộn lại là VỊ TRÍ KẾT THÚC
Trả vùng chứa trở lại START POSITION
Tạo hoạt ảnh cuộn đến END POSITION

Question 6

vui lòng đọc về scrollIntoViewIfNeeded

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}

Question 7

Bạn có thể sử dụng jQuery thay thế và hoạt ảnh <html>và <body>các phần tử:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);

ScrollIntoView có hoạt động trên tất cả các trình duyệt không?

Nó được hỗ trợ là có, nhưng trải nghiệm người dùng thì ... tệ.

scrollintoviewPlugin jQuery hoạt hình để giải cứu

`scrollintoview`Plugin jQuery hoạt hình để giải cứu