javascript - js - 固定缓冲区到屏幕底部的长表单/div，以便用户可以看到前方

Question

任何可以帮助我的人的互联网蛋糕。

我有一个很长(大约 3 个屏幕长)的 html 表单，它需要停留在一个页面上，因为它用于数据输入，并且浏览多个页面会减慢速度。

数据输入是在 Firefox 上完成的，我想要发生的是每次用户光标进入/离开可见屏幕底部或附近的字段时，向上滚动表单不仅仅是一个字段。我的每个字段都在一个新行上，Firefox 中长表单的默认行为是，一旦您点击屏幕底部，当您进入下一个字段时，它将向上滚动到看到该字段所需的最低限度；数据输入令人沮丧，因为它有助于始终能够提前看到您正在做的事情。

我不介意使用任何第三方 js 东西(jquery/mootools 等)，我尝试了 scrollTo 插件，但我对 jquery 不是很好，所以我无法让它工作，甚至不确定如果可能的话。

作为旁注，默认情况下，我想要的行为是在 Google Chrome 中，但不幸的是，我必须让它与 FF 一起工作。

Answer 1

我将焦点更改为 keyup，因为我不希望它在有人用鼠标单击字段时自动滚动，并且我在 if 语句中的值周围放置了一个缺失的括号，它现在只在它到达页面底部时滚动. (它在第一次到达页面底部后一直这样做)。

最小 8 像素似乎最适合我的表单域大小，而/1.75 在滚动发生时不会让人迷失方向。代码示例位于 http://jsfiddle.net/P7gd2/6/感谢 Yoshi 解决了这个问题。

$('input, textarea').on({
    keyup: function (evt) {
        var
        viewportHeight = $(window).height(),
        selfBottom = $(this).offset().top + $(this).height();

        if (viewportHeight - (selfBottom - $(window).scrollTop()) < 8 /*minimum distance in pixel*/) {
            $(window).scrollTop(selfBottom - viewportHeight / 1.75);
        }
    }
});