Question

我在可导航表的顶部有一个搜索栏，我想要修复该位置，以便在滚动时仍然可见。该表将自己置于搜索栏上。我在表导航脚本中使用scrollIntoView（）将视图移动到所选行。这是一个问题发生的问题：https://jsfiddle.net/5umztjty/

#screen {
    position: relative;
    z-index: 110;
    width: 255px;
    height: 140px;
    
    overflow-y: hidden;
}

#pokemons-list {
    padding-top: 3px;
    border-spacing: 0px;
    align-content: center;
    position: absolute;
    width: 100%;
}

#mySearch {
    position: fixed;
}

<!-- begin snippet: js hide: false console: true babel: false -->

我也尝试过此修复Using scrollIntoView with a fixed position header

但它仍然没有用。在这种情况下，所选元素是一个表格行，所以我有：

var rows = document.getElementById("myTable").children[1].children; 
var selectedRow
var yourHeight = '20px';

所以我写了

// scroll to your element 
rows[selectedRow].scrollIntoView(true); 

// now account for fixed header 
var scrolledY = window.scrollY; if(scrolledY) { 

window.scroll(0, scrolledY - yourHeight); 

}

我没有放导航脚本但效果很好（在var selectedRow值为0的开头）

Answer 1

您可以使用顶部，左侧和右侧（我排除底部，因为您提到您希望顶部的搜索栏位于position: fixed;的属性），例如：

#mySearch { position: fixed; top: 0; }

Answer 2

向left添加top和#mySearch位置。例如：

#mySearch {
    position: fixed;
    top: 3px;
    left: 4px;
}

Answer 3

身体的高度是为了你可以向下滚动使用“修复”修复搜索栏的位置，然后将您的身体内容设为上边距。您可以设置margin-top的值以显示您想要在正文中显示的所有信息。

＆＃13;

body{
    height: 200Vh;
}

#screen {
    width: 100vw;
    overflow-y: hidden;
}

#pokemons-list {
 margin-top: 4vh;
}

#mySearch {
    position: fixed;
    overflow: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>

  <body>
    <div id="screen">

      <input id='mySearch' onkeyup='searchPokemon()' type='text' autocomplete="off">

      <table id="pokemons-list">

        <thead>
          <tr>
            <th>NO</th>
            <th>Nom</th>
          </tr>
        </thead>

        <tbody>
          <!--auto-generated-->
          <tr>
            <td>1</td>
            <td>Name1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Name2</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Name3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Name4</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Name5</td>
          </tr>
        </tbody>
      </table>

    </div>

</html>

＆＃13;

位置：已修复无法使用scrollIntoView（）

3 个答案: