弘帝横向移动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、需要滚动的内容，一定不能换行

admin

var move_x = function(selector) {
    const $box = $(selector);
    if (!$box.length) {
        console.error("Element not found with selector:", selector);
        return;
    }

    let isDragging = false,
        startX, scrollLeft;

    // 初始光标样式
    $box.css('cursor', 'grab');

    // 滚轮滚动
    $box.on('wheel', function(e) {
        $box.scrollLeft($box.scrollLeft() + (e.originalEvent.deltaY > 0 ? 30 : -30));
        e.preventDefault();
    });

    // 鼠标按下
    $box.on('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX - $box.offset().left;
        scrollLeft = $box.scrollLeft();
        $box.css('cursor', 'grabbing');
        e.preventDefault();
    });

    // 鼠标移动
    $(document).on('mousemove', function(e) {
        if (!isDragging) return;
        const x = e.clientX - $box.offset().left;
        const walk = (x - startX) * 2;
        $box.scrollLeft(scrollLeft - walk);
    });

    // 重置拖拽状态
    function resetDrag() {
        isDragging = false;
        $box.css('cursor', 'grab');
    }

    $box.on('mouseleave', resetDrag);
    $(document).on('mouseup', resetDrag);

    // 触摸支持
    $box.on('touchstart', function(e) {
        isDragging = true;
        startX = e.originalEvent.touches[0].clientX - $box.offset().left;
        scrollLeft = $box.scrollLeft();
    });

    $(document).on('touchmove', function(e) {
        if (!isDragging) return;
        const x = e.originalEvent.touches[0].clientX - $box.offset().left;
        const walk = (x - startX) * 2;
        $box.scrollLeft(scrollLeft - walk);
    });

    $box.on('touchend', resetDrag);

    // 返回一个对象以便可以移除事件监听
    return {
        destroy: function() {
            $box.off('wheel mousedown mouseleave touchstart touchend');
            $(document).off('mousemove mouseup touchmove');
        }
    };
};