主页 › 网页制作 › 文字过长隐藏后用鼠标移动及滚动效果代码

admin 发表于 2022-9-2 21:13:52

文字过长隐藏后用鼠标移动及滚动效果代码

1、用鼠标滚轴代替移动代码，这里的.Subject有overflow:hidden
let box = document.querySelector(".search .Subject");
box.addEventListener("mousewheel", function (event) {
    // -event.wheelDelta / 2 代表幅度(速度),2可以更改
    let v = -event.wheelDelta / 2;
    box.scrollLeft += v;
    event.preventDefault();
}, false)

2、鼠标移动代码let init_x;
box.onmousedown = function (e) {
      init_x = e.pageX;
};
box.onmousemove = function (e) {
      let move_x = e.pageX - init_x;
      box.scrollLeft += move_x;
      e.preventDefault();
}

3、通用函数
var move_x = function (dom) {
      let init_x;
      let box = document.querySelector(dom);
      box.addEventListener("mousewheel", function (e) {
                let v = -e.wheelDelta / 2;
                box.scrollLeft += v;
                e.preventDefault();
      }, false);
      box.onmousedown = function (e) {
                init_x = e.pageX;
      };
      box.onmousemove = function (e) {
                let move_x = e.pageX - init_x;
                box.scrollLeft += move_x;
                e.preventDefault();
      }
}调用方法：move_x(".Subject");
参数遵循document.querySelector(dom)选择器。

查看完整版本: 文字过长隐藏后用鼠标移动及滚动效果代码