悬停箭头时滚动 - 像亚马逊网站

Question

你们有没有看到亚马逊的下拉菜单，当你将鼠标悬停在底部的箭头上时，它会像使用鼠标滚轮一样滚动。如何使用 css 实现相同的效果并进行一般性的反应？

有什么建议吗？ 到目前为止，这是我的代码，但现在只有按钮滚动而不是所有菜单。

 return (
      <div className="menu-wrapper">
        <div>
          <a className="menu-item">Pizza</a>
          <a className="menu-item">Hamburguers</a>
          <a className="menu-item">Guacamole</a>
          <a className="menu-item">Sushi</a>
          <button className="scroll-button-down">{"⌄"}</button>
        </div>
      </div>
    );

css

  .scroll-button-down:hover {
    animation: moveMenushow 0.6s linear forwards;
  }

  @keyframes moveMenushow {
    100% {
      transform: translateY(-40%);
    }
  }

Answer 1

这只是一个“屏蔽”<select> 标记。 The scrolling is built-in to browsers and will happen when the number of options exceeds the height of the viewport.

有多种方法可以制作自定义设计的下拉菜单，包括a fully custom solution，但最简单的方法，亚马逊的做法是在<select>标签上覆盖一个元素，并禁用指针事件这样您的点击就会触发<select>标签的原生下拉实现。

从那里您可以使用onChange 和useState 存储<select> 标记的值，然后将叠加层中的“全部”文本绑定到该状态变量。

这是一个 CSS 示例：

label {
  position:relative;
  display:block;
  width:max-content;
}

span {
  display:block;
  pointer-events:none;
  background:yellow;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  position:relative;
  z-index:1;
  padding:.25em 1.75em .25em 1em;
}

span::after {
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
}

select {
  cursor:pointer;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:red;
  opacity:0;
}

<label class="select-wrapper">
  <span>? All</span>
  <select>
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </select>
</label>