CODEWITHSUNDEEP
htmlgoogle-chromescrolloverflow
GaryBishop
GaryBishop

Reputation: 3782

Chrome scroll issue for inputs with values

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.

Upvotes: 2

Views: 530

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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>

Upvotes: 3

Related Questions