仅在不在视图中时滚动到元素 - jQuery

Question

我知道有几次这样的变化; 我已经浏览了一段时间,但要么我做错了,要么我找不到我需要的东西.

我有一个嵌套注释的结构,几乎和Facebook Comments插件一样,每当reply点击时,一个带有textarea的小表单和一个按钮出现在注释的底部.

同样,行为与Facebook Comments插件相同,我想在滚动新添加textarea到视图时实现相同的功能.

我已经尝试了scrollTo插件,它运行顺畅但是,即使我手动滚动到页面的最底部,滚动动画也将始终重置滚动位置并从顶部开始.

为了记录,这就是我调用scrollTo的方式:

$.scrollTo($('#addReply_1'), 800);

其中addReply_1在div包含表单.我已经大步滚动到表单本身和表单textarea.结果相同.

有没有办法滚动到元素只有它尚未可见？

我已经尝试过在SO上提供的许多解决方案,比如使用jQuery滚动到一个元素,但似乎都没有按照需要行事; 甚至滚动到具有jQuery的特定元素或在滚动后检查元素是否可见显示相同的"跳跃"行为.

---

更新:在线演示以显示行为

我上传了一个html演示页面,显示了我抱怨的行为:http://www.wouldbebetter.com/demo/comment-demo.htm

只需滚动到页面底部,然后单击任何Reply链接即可查看我所指的"跳跃"滚动.

请注意,此演示使用scrollintoview@Robert Koritnik的答案插件,但如果我使用ScrollTo,行为也是一样的.

Answer 1

是的,只有当jQuery插件不在可滚动祖先的可见边界内时,它才会滚动到元素.我写过一个完全符合你的要求.而且你可能会发现它比较容易使用,scrollTo()因为你只需要提供你想要看到的元素.

我可以在这里复制粘贴代码,但由于我不时添加一些附加内容,最好将您链接到博客文章,在那里您将找到与编程滚动和最新插件代码相关的所有详细信息.程序化滚动可能会让用户和整个用户界面体验分散注意力,因此我认为这将是一个有趣的阅读.

用法

插件非常简单易用:

$("#ElementToScrollIntoView").scrollintoview();

插件会自动找到最近的可滚动祖先并相应地滚动它(如果需要的话).您可以使用此插件的一些其他设置,这就是它们的样子:

scrollintoview: function (options) {
    /// <summary>Scrolls the first element in the set into view by scrolling its closest scrollable parent.</summary>
    /// <param name="options" type="Object">Additional options that can configure scrolling:
    ///        duration (default: "fast") - jQuery animation speed (can be a duration string or number of milliseconds)
    ///        direction (default: "both") - select possible scrollings ("vertical" or "y", "horizontal" or "x", "both")
    ///        complete (default: none) - a function to call when scrolling completes (called in context of the DOM element being scrolled)
    /// </param>
    /// <return type="jQuery">Returns the same jQuery set that this function was run on.</return>

我在我的Sharepoint 2010网站上使用这个插件,在我提供长表格数据的页面上.每当我向这个表添加一个新项目(行)时,我还会滚动到这个新记录并突出显示它,这样用户就可以立即看到新记录.

Sharepoint也是我决定不手动提供可滚动元素而是以编程方式查找它的原因.Sharepoint使用admin costumizable主页,这意味着我不知道哪个元素在运行时可以滚动.但我确实知道我想看哪个元素.因此这个插件.与scrollTo()支持各种不同场景的插件相比,它也相当简化.大多数时候,开发人员倾向于只使用一个(或者数量非常有限).

补充意见

默认链接点击处理预防

使用我的插件仍然会使它成为问题,因为添加这些回复框时会有一些闪烁.问题是您的链接点击实际执行.您应该阻止这种情况,以使您的页面顺利运行:

1. 或者通过以下两种方式之一在链接上设置点击事件:

   <a href="javascript:void AddReplyForm(44); return false;">Reply</a>
   

   要么

   <a href="#" onclick="void AddReplyForm(44); return false;">Reply</a>
   

2. 更好的方法是在文档就绪上运行:

   $(function() {
       $("a").click(function(evt) {
           evt.preventDefault();
       });
   });
   

主要思想是阻止浏览器处理链接点击.因为这会使浏览器查找页内锚点,因为它找不到,所以它会自动滚动到顶部.然后你告诉它滚动到你的元素.

重复的ID

创建回复表单时,添加新元素和新元素,但它们都具有相同的ID.您应该避免这样做或使用其他方法.您可以通过向BindClick()函数提供元素来完全删除ID .主回复生成函数也可以看起来像这样(这个函数的编写方式完全消除了元素ID的需要):

function AddReplyForm(topCommentID)
{
    var el = $(addReplyForm).appendTo('#comment_' + topCommentID + ' .right');
    BindClick(el); // mind this !! you provide the element to remove
    el.scrollintoview();
}

Answer 2

有同样的问题......在回顾几个答案之后,这就是我想出来做的事情......没有拉下另一个插件.

function scrollIntoViewIfNeeded($target) {
    if ($target.position()) {
        if ($target.position().top < jQuery(window).scrollTop()){
            //scroll up
            $('html,body').animate({scrollTop: $target.position().top});
        }
        else if ($target.position().top + $target.height() >
            $(window).scrollTop() + (
                window.innerHeight || document.documentElement.clientHeight
            )) {
            //scroll down
            $('html,body').animate({scrollTop: $target.position().top -
                (window.innerHeight || document.documentElement.clientHeight)
                    + $target.height() + 15}
            );
        }
    }
}

最后一行的"15"只是额外填充 - 您可能需要调整它,或将其添加到向上滚动行.

编辑:改变window.innerHeight到(window.innerHeight || document.documentElement.clientHeight)为IE <8支持

Answer 3

所有现代浏览器都支持这一点.访问:http://caniuse.com/#search=scrollIntoView

function scrollIntoViewIfNeeded(target) {
    var rect = target.getBoundingClientRect();
    if (rect.bottom > window.innerHeight) {
        target.scrollIntoView(false);
    }
    if (rect.top < 0) {
        target.scrollIntoView();
    } 
}

更新

目标必须是元素.如果你使用jQuery调用这样的函数:

scrollIntoViewIfNeeded($(".target")[0]);

Answer 4

确保 elem 在容器内可见：

let rectElem = elem.getBoundingClientRect(), rectContainer=container.getBoundingClientRect();
if (rectElem.bottom > rectContainer.bottom) elem.scrollIntoView(false);
if (rectElem.top < rectContainer.top) elem.scrollIntoView();

Answer 5

Element.scrollIntoViewIfNeeded()

根据MDN 网络文档：

如果Element.scrollIntoViewIfNeeded()当前元素不在浏览器窗口的可见区域内，该方法会将当前元素滚动到浏览器窗口的可见区域。如果元素已经在浏览器窗口的可见区域内，则不会发生滚动。该方法是标准Element.scrollIntoView()方法的专有变体。

示例（使用 jQuery）：

$('#example')[0].scrollIntoViewIfNeeded();

注意：此功能是非标准的，不在标准轨道上，因此在生产中使用它之前要小心。有关浏览器支持，请参阅Can I use...。