Sau khi cố gắng tìm một giải pháp xử lý mọi tình huống (các tùy chọn để tạo hiệu ứng cuộn, đệm xung quanh đối tượng một khi nó cuộn vào chế độ xem, hoạt động ngay cả trong các trường hợp tối nghĩa như trong iframe), cuối cùng tôi đã viết ra giải pháp của riêng mình cho vấn đề này. Vì nó dường như hoạt động khi nhiều giải pháp khác thất bại, tôi nghĩ tôi muốn chia sẻ nó:
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$target là một đối tượng jQuery chứa đối tượng bạn muốn cuộn vào xem nếu cần.
options (tùy chọn) có thể chứa các tùy chọn sau được truyền trong một đối tượng:
options.$container- một đối tượng jQuery trỏ đến phần tử chứa của $ target (nói cách khác, phần tử trong dom với thanh cuộn). Mặc định cho cửa sổ chứa phần tử $ đích và đủ thông minh để chọn cửa sổ iframe. Hãy nhớ bao gồm $ trong tên thuộc tính.
options.padding- phần đệm theo pixel để thêm phía trên hoặc bên dưới đối tượng khi nó được cuộn vào dạng xem. Bằng cách này, nó không đúng với cạnh của cửa sổ. Mặc định là 20.
options.instant- nếu được đặt thành true, animate jQuery sẽ không được sử dụng và cuộn sẽ ngay lập tức bật đến đúng vị trí. Mặc định là sai.
options.animationOptions- bất kỳ tùy chọn jQuery nào bạn muốn chuyển đến hàm animate jQuery (xem http://api.jquery.com/animate/ ). Với điều này, bạn có thể thay đổi thời lượng của hình ảnh động hoặc thực hiện chức năng gọi lại khi cuộn hoàn tất. Điều này chỉ hoạt động nếu options.instantđược đặt thành false. Nếu bạn cần phải có một hình ảnh động tức thì nhưng với một cuộc gọi lại, hãy đặt options.animationOptions.duration = 0thay vì sử dụng options.instant = true.