Question

我已经构建了一个侧边栏，并且通过侧边栏中的项目进行选项卡工作正常，直到您在选项卡框中输入。

当您在输入框中切换选项卡时，浏览器会滚动输入框。

此外，它似乎只发生在较小的分辨率/普通的笔记本电脑分辨率上。我似乎无法在大型桌面显示器上重现这一点。

当您在选项卡中输入框时，为什么浏览器会滚动到错误的区域？

可在此处查看代码和可重现的错误： http://plnkr.co/edit/iUsJSQs4LL8YVs4luDRX?p=preview

步骤：

点击Plunker链接打开演示网站
打开开发工具，切换设备模式（左上角开发工具中的手机图标）
在设备模式下，为设备选择Apple Ipad 3/4
点击黄色侧边栏上的任意位置以获得焦点
按Tab键切换到textarea
按Tab键前进到下一个 textarea
按Tab键前进到输入框，注意浏览器滚动目标
按Tab键前进到保存按钮，注意浏览器滚动到正确的位置

的index.html：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="sidebar">
      <div class="content">
        <div class="section"></div>
        <div class="section"></div>
        <div class="section"></div>
        <div class="section">
          <textarea></textarea>
          <textarea></textarea>
          <label>TEST</label>
          <input value="3">
          <button>SAVE</button>
        </div>
        <div class="section"></div>
        <div class="section"></div>
      </div>
    </div>
  </body>
</html>

的style.css

.sidebar {
  background-color: yellow;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.content {
  float: left;
  height: 100%;
  overflow-y: auto;
  width: 278px;
}

.section {
  height: 700px;
  position: relative;
}

编辑：我在OSX 10.9.5上使用Chrome版本40.0.2214.94（64位），在默认视网膜分辨率的Macbook pro 15“2014上。

以下是我看到的问题的屏幕截图：
（没有足够的声誉粘贴图像内联，所以我上传它以供查看）

http://minus.com/i/Y52LYpU6SveE

标记为输入元素会导致默认浏览器滚动到错误区域

0 个答案: