「前端」怎么实现鼠标滚轮控制横向滚动

前端实现鼠标滚轮控制横向滚动，可以通过监听鼠标滚轮事件并修改相应的 CSS 样式来实现。

具体实现步骤如下：

1. 监听鼠标滚轮事件，可以使用 addEventListener() 方法监听滚轮事件，例如：

window.addEventListener('wheel', function(event) {
  // code here
});

1. 判断滚轮滚动方向，可以通过 event.deltaY 判断滚动方向，当 event.deltaY > 0 时表示向右滚动，当 event.deltaY < 0 时表示向左滚动。
2. 修改 CSS 样式，根据滚动方向修改相应的样式。可以使用 scrollLeft 属性控制水平滚动，例如：

var container = document.querySelector('.container');
if (event.deltaY > 0) {
  container.scrollLeft += 4; // 向右滚动
} else {
  container.scrollLeft -= 4; // 向左滚动
}

其中，'.container' 为需要滚动的元素的 CSS 选择器。

完整代码如下：

window.addEventListener('wheel', function(event) {
  var container = document.querySelector('.container');
  if (event.deltaY > 0) {
    container.scrollLeft += 4; // 向右滚动
  } else {
    container.scrollLeft -= 4; // 向左滚动
  }
});

注意，滚动容器必须设置 overflow-x: scroll; 或者 overflow: auto; 才能实现横向滚动。

以下是未调试完美的代码，包含节流函数和平滑滚动，仅供日后继续完善：

function throttle(func, wait){
        let timer = null;
        return function(){
            let args = arguments;
            if(timer !== null) return;
            timer = setTimeout(()=>{
                func.apply(this, args);
                timer = null;
            }, wait);
        }
    }

    function handle(event){
        let el = statusLineRef.current;
        if (event.deltaY > 0) {
            el.scrollLeft += 4; // 向右滚动
        } else {
            el.scrollLeft -= 4; // 向左滚动
        }
    }

    let el = document.getElementById("aaa");
    el.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

    window.addEventListener("wheel", throttle(handle, 200));