Question

我有一个带有position: sticky的导航栏。里面有一长串元素。这行元素是水平滚动的。

一切正常，直到导航栏“粘在”页面顶部。当我尝试滚动导航栏（使用触控板）时，浏览器会尝试滚动整个页面。

我仅在Webkit浏览器（Safari，Chrome）中看到此问题。 Firefox没有这个问题。

我试图在CodePen和JSfiddle中创建一个示例，但是由于在iframe中显示了结果，因此无法在此处重现此问题。

所以我创建了一个小的HTML文件来显示问题：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    .header {
      height: 100px;
      background-color: purple;
    }
    .wrapper {
      position: relative;
    }
    .navbar {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      overflow: auto;
      padding: 1rem 0;
      background-color: lightgreen;
    }
    .navbar-container {
      display: flex;
    }
    .navbar a {
      padding: 1rem 2rem;
      background-color: #fff;
      white-space: nowrap;
      margin: 0 1rem;
    }
    .text {
      height: 150vh;
      background: linear-gradient(lightyellow, black);
    }
  </style>
</head>

<body>
  <div class="header"></div>
  <div class="wrapper">
    <div class="navbar">
      <div class="navbar-container">
        <a href="#item1">Item 1</a>
        <a href="#item2">Item 2</a>
        <a href="#item3">Item 3</a>
        <a href="#item4">Item 4</a>
        <a href="#item5">Item 5</a>
        <a href="#item6">Item 6</a>
        <a href="#item7">Item 7</a>
        <a href="#item8">Item 8</a>
        <a href="#item9">Item 9</a>
        <a href="#item10">Item 10</a>
        <a href="#item11">Item 11</a>
        <a href="#item12">Item 12</a>
        <a href="#item13">Item 13</a>
      </div>
    </div>
    <div class="text"></div>
  </div>
</body>

</html>

水平滚动在粘滞元素内不起作用

0 个答案: