16

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

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

编辑

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

编辑2

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

投票关闭我的。

4

2 回答 2

1

我最近遇到了一个表头问题，该表头将输入作为每列的过滤器。通过过滤器切换焦点会移动焦点，但如果其中一个输入不可见或部分可见，它只会将输入显示在视图中，并且我被要求将完整的输入和列显示在视图中。然后我被要求在向左向后移动时也这样做。

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

简短的回答是您要使用：

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;
    }
});
于 2017-08-01T13:40:03.480 回答
0

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

$(".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标签：hrefid

HTML：

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

希望这可以帮助！

于 2012-12-24T18:13:02.423 回答