所以DOM scrollIntoView对齐顶部/底部，但是左/右呢？ [英] So DOM scrollIntoView aligns top/bottom, but what about left/right?

问题描述

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

I would like to scroll horizontally the given element. The only way I find is using ScrollIntoView DOM method, which allows either align the element's bottom with the view bottom or the top - with the view top.

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

But what if the element is OK with respect to the Y axis, and I only want to scroll it horizontally? How can I align its left with the view left or its right with the view right?

编辑

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

Here is more context. I have a YUI table with a horizontal scrollbar. I wish to scroll it programmatically to a certain TD node. I do not think window.scrollTo is of any help to me, since the scrollbar is on a div element, not on the whole page.

EDIT2

原来有一个重复的SO问题，答案正确 - 如何以编程方式滚动带有自己滚动条的div？

Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?

投票决定关闭我的。

推荐答案

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

I've recently had a problem with a table header that had inputs as filters for each column. Tabbing through the filters would move the focus, but if one of the inputs wasn't visible or if it was partly visible, it would only JUST bring the input into view, and I was asked to bring the full input and column into view. And then I was asked to do the same if tabbing backwards to the left.

这个链接帮助我开始： http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizo​​ntal

This link helped to get me started: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

简短的回答是你要使用：

The short answer is that you want to use:

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

或：

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

这是我的解决方案（对于这个问题可能有点过头了，但也许它会帮助某人）：

Here's my solution (which may be overkill for this question, but maybe it'll help someone):

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

这篇关于所以DOM scrollIntoView对齐顶部/底部，但是左/右呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！