Vì vậy, DOM scrollIntoView căn chỉnh trên cùng/dưới cùng, nhưng những gì về trái/phải?

Question

Tôi muốn cuộn theo chiều ngang phần tử đã cho. Cách duy nhất tôi tìm thấy là sử dụng phương pháp ScrollIntoView DOM, cho phép sắp xếp phần đáy của phần tử với phần dưới cùng hoặc phần trên cùng - với phần trên cùng.

Nhưng điều gì sẽ xảy ra nếu phần tử OK đối với trục Y và tôi chỉ muốn cuộn theo chiều ngang? Làm thế nào tôi có thể căn chỉnh trái của nó với khung nhìn bên trái hoặc bên phải của nó với khung nhìn bên phải?

EDIT

Đây là bối cảnh nhiều hơn. Tôi có một bảng YUI với một thanh cuộn ngang. Tôi muốn cuộn nó theo chương trình đến một nút TD nào đó. Tôi không nghĩ rằng window.scrollTo là bất kỳ trợ giúp nào đối với tôi, vì thanh cuộn nằm trên một phần tử div, không phải trên toàn bộ trang.

EDIT2

Hóa ra đó là một bản sao SO câu hỏi với câu trả lời đúng - How can I scroll programmatically a div with its own scrollbars?

Bỏ phiếu đóng cửa mỏ.

Answer 1

Đây là điều tôi đã sử dụng trong khi quay lại. Có thể có một cách tốt hơn và hiệu quả hơn để làm việc đó nhưng điều này được các công việc thực hiện:

$(".item").click(function(event){ 
    event.preventDefault(); 
    // I broke it down into variable to make it easier to read 
    var tgt_full = this.href, 
     parts = tgt_full.split("#"), 
     tgt_clean = parts[1], 
     tgt_offset = $("#"+tgt_clean).offset(), 
     tgt_left = tgt_offset.left; 

    $('html, body').animate({scrollLeft:tgt_left}, 1000, "easeInOutExpo");   
}) 

Bạn chỉ cần chắc chắn rằng item là một thẻ a với một href tương ứng với phần tử target id:

HTML:

<a href="#one">go to section 1</a> 
... 
<section id="one"> Section 1</section> 

Hope this helps!

Answer 2

Gần đây tôi đã gặp sự cố với tiêu đề bảng có đầu vào làm bộ lọc cho mỗi cột. Tabbing thông qua các bộ lọc sẽ di chuyển tiêu điểm, nhưng nếu một trong các đầu vào không nhìn thấy được hoặc nếu nó được nhìn thấy một phần, nó sẽ chỉ đưa đầu vào vào xem, và tôi được yêu cầu đưa đầu vào và cột đầy đủ vào xem. Và sau đó tôi được yêu cầu làm tương tự nếu tabbing lùi về bên trái.

Liên kết này đã giúp cho tôi bắt đầu: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

Câu trả lời ngắn gọn là bạn muốn sử dụng:

document.getElementById('myElement').scrollLeft = 50; 

hay:

$('#myElement')[0].scrollLeft = 50; 

Đây là giải pháp của tôi (có thể quá mức cần thiết cho câu hỏi này, nhưng có thể nó sẽ giúp ai đó):

// I used $.on() because the table was re-created every time the data was refreshed 
// #tableWrapper is the div that limits the size of the viewable table 
// don't ask me why I had to move the head head AND the body, they were in 2 different tables & divs, I didn't make the page 

$('#someParentDiv').on('focus', '#tableWrapper input', function() { 
    var tableWidth = $('#tableWrapper')[0].offsetWidth; 
    var cellOffset = $(this).parent()[0].offsetLeft; 
    var cellWidth = $(this).parent()[0].offsetWidth; 
    var cellTotalOffset = cellOffset + cellWidth; 

     // if cell is cut off on the right 
    if (cellTotalOffset > tableWidth) { 
     var difference = cellTotalOffset - tableWidth; 
     $('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = difference; 
     $('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = difference; 
    } 
     // if cell is cut off on the left 
    else if ($('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft > cellOffset) { 
     $('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = cellOffset; 
     $('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = cellOffset; 
    } 
});