javascript - How to scroll down the page when a covered input box is focused? - Stack Overflow

admin管理员组

文章数量:1399022

Take a look at this page.

I have a page with a lower 'floating' fixed-position div that's covering some portion of the screen bottom of the screen, with a high z-index, and a bunch of input boxes.

The problem is that when one of the lower input boxes are focused, by pressing TAB, their content is partly hidden by the div. I would like to detect when lower input boxes are focused, and scroll the page down "just enough" to bring them to a visible spot.

Is there a clean way to do this?

Edit: my solution seems to work except for browser zoom. Try it at zoom 144% for example. Any ideas on how to fix?

Take a look at this page.

I have a page with a lower 'floating' fixed-position div that's covering some portion of the screen bottom of the screen, with a high z-index, and a bunch of input boxes.

The problem is that when one of the lower input boxes are focused, by pressing TAB, their content is partly hidden by the div. I would like to detect when lower input boxes are focused, and scroll the page down "just enough" to bring them to a visible spot.

Is there a clean way to do this?

Edit: my solution seems to work except for browser zoom. Try it at zoom 144% for example. Any ideas on how to fix?

• javascript

Share Improve this question Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked Oct 4, 2011 at 16:13 ripper234ripper234 231k280280 gold badges646646 silver badges914914 bronze badges 3

• 1 Note that you don't want it to scroll only after that input tag. You want it to scroll if any input tag is covered by the floating div. That may change if you zoom in or out. – Some Guy Commented Oct 4, 2011 at 16:19
• @Amaan - not sure this is correct. Only the focused input tags matter. Zooming is an interesting problem, but as a first approximation I'd accept a good answer even if it doesn't deal with changing zooms. Mind you, if the user Shift-Tabs he can easily get into the lower input boxes without changing zooms. – ripper234 Commented Oct 4, 2011 at 16:40
• If this is your own page, you could perhaps change it a bit to make it easier to do the JavaScript magic. A statement like if(input.offsetTop + input.offsetHeight >= bottomBox.offsetTop) window.scrollTo(0,bottomBox.offsetTop) would be all that'd be needed to be called on focus. Here, though, you'd be using JavaScript, not CSS, to keep the div floating on the page. – Some Guy Commented Oct 4, 2011 at 17:19

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

element.scrollIntoView();

supported in all mayor browsers ie-6-7-8-9-10 firefox, webkit

or:

element.focus(); element.blur();

Here is a solution by a friend of mine.

Seems to work well across browsers.

There still is one minor annoyance that the element has a larger border when selected, and part of that enlarged bordered remains hidden. I could always just add an extra pixel or two to the scroll, but I'm sure there must be a more elegant solution.

Ripper234's solution worked well for me. The following solution is for anyone whose field is covered by an element above it (such as a fixed nav) rather than below it.

I've also animated it using jQuery and added a padding variable which is useful if you have a label above the field that you want to show, or want to center the field (just set padding to half of screen height).

var navHeight = 200;
var padding = 25;
$('input').on('focus', function() {
  try {
    var elemTop = $(this).offset().top;
    var maxVisible = $(document).scrollTop() + navHeight;
    if (elemTop < maxVisible) {
      $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250);  
    } 
  } catch (e) {
    console.log("Error: " + e);
  }
});

What if you add an onfocus handler on each textbox and verify whether their position is too close/far to the "bottom-box" element and when so you change the position of this div element accordingly (move it down/up).

I would just use Z-index to pop the focused input above the fixed div

I don't think there is any mon way of moving the screen down, maybe I'm wrong..

perhaps you can do it with in-page links like this as they are designed to pull the screen down, use JQuery to say "when this input is in focus go to the corresponding anchor point"

<a href="#box5"><input type="text" /></a>

本文标签： javascriptHow to scroll down the page when a covered input box is focusedStack Overflow