请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 636|回复: 0

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

[复制链接]
发表于 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)选择器。



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-29 17:06 , Processed in 0.080742 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表