弘帝横向移动move_x方法的使用

admin

1、原始代码：
var move_x = function (dom) {
    var init_x;
    var box = document.querySelector(dom);
    box.addEventListener("mousewheel", function (e) {
        var v = -e.wheelDelta / 2;
        box.scrollLeft += v;
        e.preventDefault();
    }, false);
    box.onmousedown = function (e) {
        init_x = e.pageX;
    };
    box.onmousemove = function (e) {
        var move_x = init_x - e.pageX;
        box.scrollLeft += move_x;
        e.preventDefault();
    };
};

2、deepseek改进后的代码：
var move_x = function (dom) {
    var init_x;
    var box = document.querySelector(dom);
    var isDragging = false;

    // 鼠标滚轮滚动（兼容现代浏览器）
    box.addEventListener("wheel", function (e) {
        box.scrollLeft += e.deltaY;  // deltaY 表示垂直滚动量
        e.preventDefault();
    });

    // 鼠标拖拽滚动
    box.onmousedown = function (e) {
        isDragging = true;
        init_x = e.pageX;
        e.preventDefault();
    };

    box.onmousemove = function (e) {
        if (!isDragging) return;
        box.scrollLeft += init_x - e.pageX;
        init_x = e.pageX;
    };

    box.onmouseup = box.onmouseleave = function () {
        isDragging = false;
    };
};
3、全新优化代码：
var move_x = function (selector) {
    const box = document.querySelector(selector);
    let isDragging = false, startX, scrollLeft;

    // 滚轮滚动（兼容现代浏览器）
    box.addEventListener('wheel', (e) => {
        box.scrollLeft += e.deltaY;
        e.preventDefault();
    });

    // 拖拽逻辑
    box.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.pageX - box.getBoundingClientRect().left;
        scrollLeft = box.scrollLeft;
        box.style.cursor = 'grabbing';
    });

    box.addEventListener('mouseleave', () => {
        isDragging = false;
        box.style.cursor = 'grab';
    });

    box.addEventListener('mouseup', () => {
        isDragging = false;
        box.style.cursor = 'grab';
    });

    box.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        e.preventDefault();
        const x = e.pageX - box.getBoundingClientRect().left;
        const walk = (x - startX) * 2;
        box.scrollLeft = scrollLeft - walk;
    });
};
早期的代码仍沿用旧时代码，新hondy.js已采用全新deepseek优化代码。

admin

html假定：
.menu .container ul
需要滚动是ul内容，使用方法如下：

1、直接调用最新hondy.js或hondy.min.js
2、对需要横向溢出的DIV，js调用$(selecter)，上例为：$(".menu ul")
3、css需要设计如下：
.container{overflow:auto}  //这个不可缺少，否则没有滚动效果
ul{flex-flow:row nowrap}  //不允许换行


需要做出解释的是：
1、.menu是唯一标识，防止有多个重复的.container ul存在
2、.container是限制滚动的区域，保证ul在.container里横向滚动
3、需要滚动的内容，一定不能换行