Question

我想水平滚动给定元素。我发现的唯一方法是使用ScrollIntoView DOM方法，它允许将元素的底部与视图底部或顶部对齐 - 与视图顶部对齐。

但是如果元素相对于Y轴是可以的，我只想水平滚动它怎么办？如何将左侧与左侧视图或右侧视图右侧对齐？

修改

这是更多背景信息。我有一个带有水平滚动条的YUI表。我希望以编程方式将其滚动到某个TD节点。我不认为window.scrollTo对我有任何帮助，因为滚动条位于div元素上，而不是整个页面上。

EDIT2

原来有一个重复的SO问题，答案正确 - How can I scroll programmatically a div with its own scrollbars?

投票结束我的。

Answer 1

我最近遇到了一个表头问题，该表头的输入作为每列的过滤器。通过过滤器的选项卡会移动焦点，但是如果其中一个输入不可见或者它是部分可见的，那么它只会将输入带入视图，并且我被要求将完整的输入和列带入视图。然后我被要求做同样的事情，如果向后退到左边。

此链接有助于我开始使用：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;
    }
});

Answer 2

这是我曾经使用过的东西。可能有更好，更有效的方法，但这可以完成工作：

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

希望这有帮助！

所以DOM scrollIntoView对齐顶部/底部，但是左/右呢？

2 个答案: