使用Safari不需要的自动滚动功能可以使输入焦点居首

Question

使用Safari不需要的自动滚动功能可以使输入焦点居首

Hel*_*ios 7 html css safari mobile-safari ios

我有这个页面：

    <html>

      <body>
        <div class="app">
          <div class="main-panel">
            <nav class="navbar"></nav>
            <div class="sidenav">
              <ul>
                <li>First</li>
                <li>2nd</li>
                <li>3rd</li>
                <li>4th</li>
              </ul>
            </div>
            <div class="page-container">
              <div class="placeholder">
                <ul>
                  <li>First</li>
                  <li>2nd</li>
                  <li>3rd</li>
                  <li>4th</li>
                </ul>
              </div>
              <input type="text">
            </div>
          </div>
        </div>
      </body>

    </html>

Run Code Online (Sandbox Code Playgroud)

和以下css：

    html, body {
      height: 100%;
      width: 100%;
      position: fixed;
      overflow: visible; }

    .app {
      background-color: #f4f5f8;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto; }

    .main-panel {
      height: 100%;
      display: grid;
      grid-template-columns: 210px 1fr;
      grid-template-rows: 76px 1fr; }

    .navbar {
      grid-column: 1 / 3; }

    .page-container {
      overflow-y: auto;
      overflow-x: hidden; }

    .placeholder {
      display: block;
      height: 500px;
      width: 100%; }

Run Code Online (Sandbox Code Playgroud)

也可以在以下网址获得：https : //jsfiddle.net/1vk5jcuL/

在Safari 12.1（MacOS和iOS）上，如果您向下滚动主体并将鼠标悬停在输入上，它将自动滚动到顶部。

我想保持滚动行为不变（即，滚动时，仅滚动主面板，而不滚动侧面导航，但Safari不应在输入焦点上滚动到顶部。

这个问题纯粹是关于HTML + CSS，因此不涉及JS。

编辑：这是发生的GIF记录：https：//imgur.com/a/hPD9YuP

Answer 1

Mar*_*ark 0

在页面容器上设置 max-height:100%

.page-container
  overflow-y: auto
  overflow-x: hidden
  max-height: 100%

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年前
查看次数：	547 次
最近记录：	6 年，8 月前