Итак, DOM scrollIntoView выравнивает верхнюю/нижнюю часть, но как насчет левого/правого?

Я хотел бы прокручивать по горизонтали данный элемент. Единственный способ, которым я нахожу, - использовать метод ScrollIntoView DOM, который позволяет либо выровнять нижний элемент, либо снизу вверх, либо сверху - с верхним видом.

Но что, если элемент в порядке относительно оси Y, и я хочу только прокручивать его по горизонтали? Как я могу выровнять его слева с видом влево или вправо с правом представления?

ИЗМЕНИТЬ

Вот более контекст. У меня есть таблица YUI с горизонтальной полосой прокрутки. Я хочу программно прокрутить его до определенного TD node. Я не думаю, что window.scrollTo может мне помочь, поскольку полоса прокрутки находится в элементе div, а не на всей странице.

EDIT2

Оказывается, есть дублированный вопрос SO с правильным ответом - Как прокручивать программно div с помощью собственных полос прокрутки?

Голосование, чтобы закрыть мою.

ОТВЕТЫ

Ответ 1

Это то, что я использовал некоторое время назад. Там может быть более эффективный и эффективный способ сделать это, но это заработает:

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

Вам просто нужно убедиться, что item является тегом a с href, который соответствует целевому элементу id:

HTML:

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

Надеюсь, это поможет!

Ответ 2

Недавно у меня возникла проблема с заголовком таблицы, в котором в качестве фильтров для каждого столбца были введены вложения. Вкладка через фильтры будет перемещать фокус, но если один из входов не был виден или если он был частично видимым, он бы просто ТОЛЬКО вводил ввод в представление, и меня попросили привести полный ввод и столбец в поле зрения. И затем меня попросили сделать то же самое, если табулировать назад влево.

Эта ссылка помогла мне начать: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

Короткий ответ заключается в том, что вы хотите использовать:

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

или

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

Здесь мое решение (которое может быть излишним для этого вопроса, но, возможно, это поможет кому-то):

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