Quindi DOM scrollIntoView si allinea in alto/in basso, ma che dire di sinistra/destra?

Question

Vorrei scorrere orizzontalmente l'elemento specificato. L'unico modo che trovo è usare il metodo ScrollIntoView DOM, che consente di allineare il fondo dell'elemento con la vista in basso o in alto - con la vista in alto.

Ma cosa succede se l'elemento è OK rispetto all'asse Y e io lo voglio solo scorrere orizzontalmente? Come posso allineare la sinistra con la vista sinistra o destra con la vista destra?

EDIT

qui è più contesto. Ho una tabella YUI con una barra di scorrimento orizzontale. Desidero farlo scorrere a livello di codice su un determinato nodo TD. Non penso che lo window.scrollTo mi sia di alcun aiuto, poiché la barra di scorrimento si trova su un elemento div, non sull'intera pagina.

EDIT2

Risulta C'è così domanda con la risposta giusta un duplicato - How can I scroll programmatically a div with its own scrollbars?

Le votazioni per chiudere la mia.

Answer 1

Questo è qualcosa che ho usato un po 'di tempo fa. Ci potrebbe essere il modo migliore e più efficiente di farlo, ma questo ottiene il lavoro fatto:

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

Hai solo bisogno di assicurarsi che il item è un tag a con una href che corrisponde all'elemento di destinazione id:

HTML:

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

Spero che questo aiuti!

Answer 2

Recentemente ho riscontrato un problema con un'intestazione di tabella con input come filtri per ogni colonna. L'azione di sfogliare i filtri sposterebbe la messa a fuoco, ma se uno degli input non fosse visibile o se fosse parzialmente visibile, solo JUST avrebbe portato l'input in visualizzazione e mi è stato chiesto di visualizzare l'intero input e la colonna. E poi mi è stato chiesto di fare la stessa cosa se tabbing all'indietro a sinistra.

Questo collegamento ha contribuito a farmi iniziare: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

La risposta breve è che si desidera utilizzare:

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

o:

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

Ecco la mia soluzione (che può essere eccessivo per questa domanda, ma forse aiuterà qualcuno):

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