滚动查看隐藏在持久标头下方的元素 [英] Scrolling into view an element hidden beneath a persistent header

问题描述

我目前正在严格限制我使用JavaScript的工作(例如没有jQuery之类的框架，而Firefox 2.0之后没有任何框架).

I'm currently working under some tight restrictions with regard to what I can do with JavaScript (no frameworks such as jQuery for example, and nothing post Firefox 2.0).

这是我的问题；我有一个永久的标题浮动在页面的顶部.我的输入元素遍布各处(我们正在精确地复制纸质表格，包括背景图像).页面底部附近有一个字段，该字段会被选中(使用键盘选项卡按钮)，并将焦点放在页面顶部的字段上.Firefox将自动滚动字段进入视图".但是，尽管浏览器认为该字段处于可见状态，但实际上它隐藏在持久标头下方.

Here's my problem; I have a persistent header floating at the top of the page. I have input elements scattered throughout (we're replicating a paper form exactly, including the background image). There is a field nearing the bottom of the page that gets tabbed out (using keyboard tab button) and puts the focus on a field at the top of the page. Firefox will automatically scroll the field "into view". However, while the browser believes the field is in view, it's actually hidden beneath the persistent header.

http://imageshack.us/a/img546/5561/scrollintoviewproblem.png

可以通过从页面的另一个位置单击选项卡"来访问上方的蓝色字段.浏览器认为该字段已滚动到视图中，但实际上隐藏在浮动持久标头下方.

The blue field above is accessed by hitting "tab" from another location on the page. The browser believes the field has been scrolled into view, but it's in fact hidden beneath the floating persistent header.

我要寻找的是关于如何检测到该标题下方的字段并相应地滚动整个页面的想法.

What I'm looking for is ideas as to how I can detect that the field is beneath this header and scroll the entire page accordingly.

我尝试了一些margin&填充(请参见 http://code.stephenmorley.org/javascript/detachable-导航/#注意事项).我还尝试过每次我们关注某个字段时都调用JavaScript函数"scrollIntoView(element)"，但要考虑表单上的字段数量(以及我们将它们对齐以匹配纸张的背景图像这一事实)完全正确)，这会导致在跳动彼此靠近且高度略有不同的字段时出现一些非常严重的跳跃"行为.

I've tried a few variations of margin & padding (see other considerations at http://code.stephenmorley.org/javascript/detachable-navigation/#considerations) without luck. I've also tried calling the JavaScript function "scrollIntoView(element)" each time we focus on a field, but given the amount of fields on the form (and the fact that we're aligning them to match the background image of a paper form exactly), this was causing some pretty severe "jumping" behavior when tabbing through fields close to each other that were at slightly different heights.

只要不需要太多的工作，我就可以更改持久标头的完成方式.不幸的是，框架是不可能的，因为我们需要与持久标头中的页面内容进行交互.

I can change how the persistent header is done, so long as it doesn't require too much effort. Unfortunately, frames are out of the question because we need to interact with the page content from the persistent header.

理想情况下，解决方案将使用CSS，但如果它解决了我的问题，我就会接受JavaScript.

Ideally the solution would be in CSS, but I'm open to JavaScript if it solves my problem.

另一点注意，我们要求输入元素具有背景色，这意味着向其添加填充将使背景色拉伸，从而隐藏了部分背景图像.但是，输入元素位于div中，因此我们可以利用它来发挥我们的优势.

Another note, we require that the input elements have a background color, which means that adding padding to them would make the background color stretch, which hides parts of the background image. BUT, the input elements are in a div, so we might be able to use this to our advantage.

推荐答案

因此，在进行了更多搜索之后(感谢@Kraz使用scrollTo()建议在此路线上处于领先地位)，我找到了一个适用于我的解决方案

So after doing some more searching (thanks to @Kraz for leading on this route with the scrollTo() suggestion) I've found a solution that works for me.

我为每个元素动态添加了onFocus调用，因此它们始终调用scrollScreenArea(element)函数，该函数确定它们是隐藏在顶部标题下方还是太靠近页脚区域(这完全解决了另一个问题，使用相同的解决方案).

I've added an onFocus call to each element dynamically, so they always call the scrollScreenArea(element) function, which determines if they're hidden beneath the top header or too close to the footer area (this solves another problem entirely, using the same solution).

/* This function finds an element's position relative to the top of the viewable area */
function findPosFromTop(node) { 
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll = window.scrollY;
        } while (node = node.offsetParent);


    }
    return (curtop - curtopscroll);
}

/* This function scrolls the page to ensure that elements are
   always in the viewable area */
function scrollScreenArea(el) 
{ 

    var topOffset       = 200; //reserved space (in px) for header
    var bottomOffset    = 30;  //amount of space to leave at bottom
    var position        = findPosFromTop(el);
    //if hidden beneath header, scroll into view
    if (position < topOffset)
    {
        // to scroll up use a negative number
        scrollTo(el.offsetLeft,position-topOffset);
    }
    //if too close to bottom of view screen, scroll into view
    else if ((position + bottomOffset) > window.innerHeight)
    {
        scrollTo(0,window.scrollY+bottomOffset);
    }
}

如果您有任何疑问，请告诉我.感谢@Kraz将我发送到此解决方案.

Let me know if you have any questions. Thanks @Kraz for sending me onto this solution.

我也想引用我可以在浏览器上检测到用户可见区域吗?，因为我从浏览器中获取了一些代码，并且部分描述了我的问题(有一个简洁的图表可以启动).

As well, I'd like to reference Can I detect the user viewable area on the browser? since I took some code from there and that partially described my problem (with a neat diagram to boot).

这篇关于滚动查看隐藏在持久标头下方的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！