Chrome scroll issue for inputs with values

Question

This js Bin demonstrates an issue I'm seeing with Chrome. When I focus on the first input and tab through the list, focus will move to inputs that are invisible to the user without scrolling it up as it should. You'll see it when you pass item D in the list. If I remove the initial value from each input, then scrolling works as it should. It seems to me that something about the automatic selection of the previous value breaks the scrolling.

Am I doing something wrong here? It works fine in Firefox.

Also, if anyone can suggest a workaround it would be a big help.

I've got a hack workaround here: jsbin.com/befoka/edit?html,css,js — GaryBishop
– GaryBishop, Commented Oct 14, 2015 at 14:17

Rick Hitchcock · Accepted Answer · 2015-10-14 14:40:42Z

3

You have a nice hack, but it can be simplified:

$(function() {
  $('input').on('focus', function(e) {
    if(this.scrollIntoViewIfNeeded) {
      this.scrollIntoViewIfNeeded();
    }
  });
});

For browsers that don't support scrollIntoViewIfNeeded(), the function won't be called. Chrome does support it, so this solves the problem.

$(function() {
  $('input').on('focus', function(e) {
    this.scrollIntoViewIfNeeded();
  });

  $('input').first().focus();
});

.timepoints {
  list-style: none;
  margin: 0.5em 0;
  height: 10em;
  overflow: auto;
  border: 1px solid black;
  padding: 0.1em
}
.timepoints li {
  border: 1px solid black;
  padding: 0.5em;
  margin-bottom: 0.2em;
  margin-left: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timepoints">
  <li>
    <input type="text" value="A" />
  </li>
  <li>
    <input type="text" value="B" />
  </li>
  <li>
    <input type="text" value="C" />
  </li>
  <li>
    <input type="text" value="D" />
  </li>
  <li>
    <input type="text" value="E" />
  </li>
  <li>
    <input type="text" value="F" />
  </li>
</ul>

answered Oct 14, 2015 at 14:40

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GaryBishop Over a year ago

Yes, much better than mine. I didn't know about scrollIntoViewIfNeeded. Seems to do exactly what I need.

GaryBishop Over a year ago

This doesn't fix the problem on Chrome 45 on my Chromebook.

Rick Hitchcock Over a year ago

Interesting. Can you console.log this.scrollIntoViewIfNeeded to see if Chromebook supports it?

GaryBishop Over a year ago

I spoke too soon. It works in the jsBin when the output is popped out. But doesn't work when output is shown in one of the little strips they use. I don't need that case anyway. It's working fine at test.tarheelgameplay.org. I'll put it in production when I get back home.

Collectives™ on Stack Overflow

Chrome scroll issue for inputs with values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related