javascript 所以 DOM scrollIntoView 对齐顶部/底部，但左/右呢？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14023765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
So DOM scrollIntoView aligns top/bottom, but what about left/right?
提问by mark
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.
我想水平滚动给定的元素。我找到的唯一方法是使用 ScrollIntoView DOM 方法，该方法允许将元素的底部与视图底部或顶部对齐 - 与视图顶部对齐。
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?
但是如果元素相对于 Y 轴没问题，而我只想水平滚动它呢？如何将其左侧与左侧视图对齐或右侧与右侧视图对齐？
EDIT
编辑
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.scrollTois of any help to me, since the scrollbar is on a div element, not on the whole page.
这里有更多的上下文。我有一个带有水平滚动条的 YUI 表。我希望以编程方式将其滚动到某个 TD 节点。我认为window.scrollTo对我没有任何帮助，因为滚动条位于 div 元素上，而不是整个页面上。
EDIT2
编辑2
Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?
原来有一个重复的 SO 问题有正确的答案 -如何使用自己的滚动条以编程方式滚动 div？
Voting to close mine.
投票关闭我的。
回答by Owen
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.
我最近遇到了一个表头问题，该表头将输入作为每列的过滤器。切换过滤器会移动焦点，但如果其中一个输入不可见或部分可见，它只会将输入显示在视图中，并且我被要求显示完整输入和列。然后我被要求如果向左向后移动，我也要做同样的事情。
This link helped to get me started: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal
这个链接帮助我开始：http: //www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal
The short answer is that you want to use:
简短的回答是您要使用：
document.getElementById('myElement').scrollLeft = 50;
or:
或者：
$('#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;
}
});
回答by Maroshii
This is something I used a while back. There might be better and more efficient way of doing it but this gets the work done:
这是我前一段时间使用的东西。可能有更好，更有效的方法来做这件事，但这可以完成工作：
$(".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");
})
You just need to make sure that the itemis an atag with an hrefthat corresponds to the target idelement:
您只需要确保item是一个a标签，其href对应于目标id元素：
HTML:
HTML：
<a href="#one">go to section 1</a>
...
<section id="one"> Section 1</section>
Hope this helps!
希望这可以帮助！
