Also DOM scrollIntoView richtet sich oben/unten, aber was ist mit links/rechts?

Question

Ich möchte das angegebene Element horizontal scrollen. Die einzige Methode, die ich finde, ist die Verwendung der ScrollIntoView DOM-Methode, die es ermöglicht, die Unterseite des Elements mit der Ansicht unten oder oben - mit der Ansicht oben - auszurichten.

Aber was ist, wenn das Element in Bezug auf die Y-Achse in Ordnung ist und ich es nur horizontal scrollen möchte? Wie kann ich die linke oder die rechte Seite mit der rechten Ansicht ausrichten?

EDIT

ist hier mehr Kontext. Ich habe eine YUI-Tabelle mit einer horizontalen Bildlaufleiste. Ich möchte es programmatisch zu einem bestimmten TD-Knoten scrollen. Ich denke nicht, window.scrollTo ist mir eine Hilfe, da die Bildlaufleiste auf einem Div-Element ist, nicht auf der ganzen Seite.

EDIT2

Stellt sich heraus, es ist ein Duplikat SO Frage die richtige Antwort - How can I scroll programmatically a div with its own scrollbars?

Voting Mine zu schließen.

Answer 1

Das ist etwas, das ich vor einiger Zeit benutzt habe. Es wäre vielleicht besser und effizienter Weg, es zu tun, aber das wird die Arbeit getan:

$(".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");   
}) 

Sie müssen nur sicherstellen, dass die item ein a-Tag mit einem href, die mit dem Ziel id Elemente entspricht:

HTML:

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

hoffe, das hilft!

Answer 2

Ich hatte vor kurzem ein Problem mit einem Tabellenkopf, der Eingänge als Filter für jede Spalte hatte. Das Durchsehen der Filter würde den Fokus verschieben, aber wenn eine der Eingaben nicht sichtbar oder teilweise sichtbar wäre, würde sie nur die Eingabe in Sicht bringen, und ich wurde gebeten, die volle Eingabe und Spalte in Sicht zu bringen. Und dann wurde ich gebeten, dasselbe zu tun, wenn ich rückwärts nach links tippte.

Dieser Link zu beginnen hat mir geholfen: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

Die kurze Antwort ist, dass Sie verwenden möchten:

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

oder:

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

meine Lösung hier (welche sein kann Overkill für diese Frage, aber vielleicht hilft es jemandem):

// 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; 
    } 
});