悬停时滚动-反应js答案

【问题标题】：Scroll when hover - react js悬停时滚动-反应js
【发布时间】：2020-12-30 18:26:57
【问题描述】：

目前，我有这个菜单，我想做的是每当我们将鼠标悬停在类名为“scroll-button-down”的按钮上时，我想向下滚动菜单，但现在只有按钮在滚动而不是所有菜单。

这是我目前的代码：

 return (
      <div className="menu-wrapper">
        <div>
          <a className="menu-item">Pizza</a>
          <a className="menu-item">Hamburguers</a>
          <button>{"⌃"}</button>  
          <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%);
    }
  }

【问题讨论】：

我不认为没有 JS 可以做到这一点。如果您想根据孩子的状态应用属性，CSS 不是选择的工具（它被称为级联样式表是有原因的）。我认为你需要 JS 来处理这个。
你能提供一个非常通用的js例子吗？ @chingucoding
我会把它写下来作为这个问题的答案。

标签： javascript css reactjs react-hooks

【解决方案1】：

使用JS，就可以实现这个效果。以下是可用于跟踪事件的代码。我不清楚要滚动的元素，所以你需要自己做那部分。

let scrollToken = null;

function mouseEnter(direction){
  scrollToken = setInterval(function(){
    if(direction === "down"){
      // Scroll down, e.g. by using scrollBy
    }else{
      // Scroll up, e.g. by using scrollBy
    }
  }, 3);
}

function mouseLeave(){
  clearInterval(scrollToken);
}

      <div className="menu-wrapper">
        <div>
          <a className="menu-item">Pizza</DropDownItem>
          <a className="menu-item">Hamburguers</DropDownItem>
          <button className="scroll-button-down" onmouseover="mouseEnter('down')" onmouseleave="mouseLeave()">{"⌃"}</button>  
          <a className="menu-item">Guacamole</DropDownItem>
          <a className="menu-item">Sushi</DropDownItem>
          <button>{"⌄"}</button>
        </div>
      </div>

【讨论】：