在WordPress的fullpage.js中实现滚轮/滑动横向滚动

嘿，这就教你把触摸板横向滚动的功能加到mcw-fullpage-gutenberg插件里，分两种方法，一种适合临时测试，另一种更安全（避免插件更新丢失修改）：

方法一：直接修改插件核心文件（记得先备份！） #

1. 找到插件的JS文件：登录WordPress后台，进入插件 > 插件文件编辑器，选择mcw-fullpage-gutenberg插件，定位到它的主JS文件（通常在assets/js/目录下，比如fullpage-main.js这类命名）。
2. 找到fullpage初始化代码：插件里肯定有类似这样的初始化段：

new fullpage('#fullpage-container', {
    // 插件自带的配置项
    sectionsColor: ['#f2f2f2', '#4BBFC3'],
    // ...其他配置
});

3. 添加触摸滚动逻辑：在这段初始化代码的后面，或者在afterRender回调里插入以下代码（就是你找到的解决方案核心）：

// 监听触摸板横向滚动事件
document.addEventListener('wheel', function(e) {
    // 判断是否为横向滚动操作（deltaX绝对值大于deltaY）
    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
        e.preventDefault(); // 阻止默认纵向滚动行为
        // 根据滚动方向触发fullpage的左右滑动
        if (e.deltaX > 0) {
            fullpage_api.moveSlideRight();
        } else {
            fullpage_api.moveSlideLeft();
        }
    }
}, { passive: false }); // 必须设为false才能调用preventDefault

4. 保存文件，刷新页面测试触摸板滚动效果。

方法二：用子主题加载自定义JS（推荐！） #

这种方法不用修改插件本身，插件更新后修改不会丢失：

1. 创建自定义JS文件：在你的子主题目录下新建js文件夹，里面创建fullpage-touchpad-scroll.js文件，写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 确保fullpage API已经初始化完成
    if (typeof fullpage_api !== 'undefined') {
        // 监听触摸板滚动事件
        document.addEventListener('wheel', function(e) {
            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
                e.preventDefault();
                e.deltaX > 0 ? fullpage_api.moveSlideRight() : fullpage_api.moveSlideLeft();
            }
        }, { passive: false });
    }
});

2. 修改子主题的functions.php：打开子主题的functions.php文件，添加以下代码来注册并加载这个脚本：

function enqueue_fullpage_touchpad_scroll() {
    // 只在使用fullpage的页面加载脚本，替换成你的页面判断条件
    if ( is_page('你的fullpage页面slug') || is_page_template('fullpage-template.php') ) {
        wp_enqueue_script(
            'fullpage-touchpad-scroll',
            get_stylesheet_directory_uri() . '/js/fullpage-touchpad-scroll.js',
            array('jquery', 'mcw-fullpage-script'), // 第二个参数要对应插件的JS注册名，需确认插件代码里的handle
            '1.0',
            true // 放在页面底部加载，确保依赖加载完成
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_fullpage_touchpad_scroll');

小提示：要把mcw-fullpage-script替换成插件实际使用的JS handle，你可以查看插件代码里wp_enqueue_script的第一个参数，比如插件可能用mcw-fullpage-gutenberg-js这类名称。

3. 保存所有文件，刷新页面测试触摸板横向滚动效果。

额外注意事项 #

• 如果遇到滚动冲突，可以尝试只监听fullpage容器的wheel事件，而不是整个document。
• 测试时要用支持横向滚动的触摸板，比如Mac触控板或Windows精准触摸板。

内容的提问来源于stack exchange，提问作者Dilara Bitkin