Böylece DOM scrollIntoView, üst/alt hizalar, ancak sola/sağa ne dersin?

Question

Verilen öğeyi yatay olarak kaydırmak istiyorum. Bulduğum tek yol, ScrollIntoView DOM yöntemini kullanmaktır; bu yöntem, öğenin altını görünümün alt kısmı veya üst kısmı ile - görünümün üst kısmı ile hizalamaya izin verir.

Peki ya öğe Y eksenine göre Tamam ise ve ben sadece yatay olarak kaydırmak isterim? Soldaki görünümü sola veya sağa bakarken sağa nasıl hizalayabilirim? İşte

DÜZENLEME

daha bağlamıdır. Yatay kaydırma çubuğuna sahip bir YUI tablom var. Programlı olarak belirli bir TD düğümüne kaydırmak istiyorum. Kaydırma çubuğu tüm sayfada değil, div öğesinde olduğundan, window.scrollTo'un bana herhangi bir yardımı olduğunu düşünmüyorum. How can I scroll programmatically a div with its own scrollbars?

Oy mayın kapatmak için -

EDIT2

yinelenen doğru cevabı olan SO soru var ortaya çıktı.

Answer 1

Bu eskiden kullandığım bir şey. Orada bunu yapmanın daha iyi ve daha verimli bir yoldur ama bunun yapılması işi alır olabilir:

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

sadece item hedef id elemana karşılık gelen bir href ile a etiketi olduğundan emin olmak gerekir:

HTML: Bu yardımcı olur

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

Umut!

Answer 2

Son zamanlarda, her sütun için filtre olarak girdi olan bir tablo üstbilgisinde bir sorun yaşadım. Filtrelerden sekme işlemi odağı hareket ettirecektir, ancak girişlerden biri görünmüyorsa veya kısmen göründüyse, yalnızca SADECE görünümü girdiye getirecektir ve tam giriş ve sütunu görüntülemeye getirmem istenmiştir. Ve sonra geri sola doğru sekme yapıyorsa aynısını yapması istendi.

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

ya: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

Kısa cevap kullanmak istediğiniz olmasıdır:

Bu bağlantı başladı beni yardımcı

İşte

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

benim çözüm (ki olabilir Bu soru için overkill, ama belki birilerine yardım edeceğim):

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