解决 Argon 主题浏览页面时滑动过快的问题

2022-10-27 10:03:14 浏览数 (3)

解决 Argon 主题浏览时页面滑动过快的问题

问题发现

Argon 这个主题也用了不短的时间了,在使用的过程中,有一个奇怪的问题一直困扰着我 —— 那就是当使用鼠标滚轮滑动界面时,滑动速度远超预期,让人十分烦恼。今天闲下来了以后,便开始着手探索这个问题。

问题定位

首先,并不是所有的 Argon 主题都有这个问题,但也并不是我一个人有这个问题 —— 在多个使用 Argon 主题的博客中,至少有 30% 的用户存在和我相同的问题,而当切换到其他主题时,问题便得到了解决。因此,我将问题定位到了 Argon 主题本身中。

作为第一步,我先尝试着卸载 WordPress 插件以查看是否是插件与主题冲突导致,但即使卸载了所有 WordPress 插件,问题也没有得到解决;

接下来,我尝试前往 Argon 的 GitHub Issues 站点 查看是否有和我遇到相似问题的用户,但是也没有结果;

最后,我尝试与其他正常的网站(感谢 Ghost_chu’s Blog)对比动画或是HTML代码上的不同,并且特意注意有“滚动”(scroll)关键字的内容,有了发现:

正常站点部分 script 列表

我的站点部分 script 列表

可以发现,比起正常站点,我的站点额外引入了一个叫做 smoothscroll 的 js 库,而这可能就是造成问题的元凶。

问题解决

既然用的都是同一个 Argon 主题,那么就必然有办法修改这些设置,因此,我前往 Argon 主题选项,找到了对应的设置项:

经过测试,当选用 使用平滑滚动方案 1 (脉冲式滚动) (仿 Edge) (推荐) 作为平滑滚动方案时,便会出现这个问题。最终,我将该选项修改为 使用平滑滚动方案 1 (平滑) (推荐),保存后,问题得到了解决。

问题分析

可以看到,虽然我修改了平滑滚动方案,但是实际上两个方案使用的都是 smoothscroll 库,那么,问题出现在哪呢?通过对比两个方案 smoothscroll 库的不同,我得到了答案:

代码语言:javascript复制
//
// SmoothScroll for websites v1.4.9 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me. 
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any  
// extension for browsers or native application
// without getting a written permission first.
//

(function () {

    // Scroll Variables (tweakable)
    var defaultOptions = {

        // Scrolling Core
        frameRate: 150, // [Hz]
        animationTime: 300, // [ms]
        stepSize: 200, // [px]

        // Pulse (less tweakable)
        // ratio of "tail" to "acceleration"
        pulseAlgorithm: true,
        pulseScale: 6,
        pulseNormalize: 1,

        // Acceleration
        accelerationDelta: 50,  // 50
        accelerationMax: 3,   // 3

        // Keyboard Settings
        keyboardSupport: true,  // option
        arrowScroll: 50,    // [px]

        // Other
        fixedBackground: true,
        excluded: ''
    };

    var options = defaultOptions;


    // Other Variables
    var isExcluded = false;
    var isFrame = false;
    var direction = { x: 0, y: 0 };
    var initDone = false;
    var root = document.documentElement;
    var activeElement;
    var observer;
    var refreshSize;
    var deltaBuffer = [];
    var deltaBufferTimer;
    var isMac = /^Mac/.test(navigator.platform);

    var key = {
        left: 37, up: 38, right: 39, down: 40, spacebar: 32,
        pageup: 33, pagedown: 34, end: 35, home: 36
    };
    var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };

采用 使用平滑滚动方案 1 (脉冲式滚动) (仿 Edge) (推荐) 方案时 smoothscroll 库的部分代码

代码语言:javascript复制
//
// SmoothScroll for websites v1.4.9 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me. 
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any  
// extension for browsers or native application
// without getting a written permission first.
//

(function () {

    // Scroll Variables (tweakable)
    var defaultOptions = {

        // Scrolling Core
        frameRate: 150, // [Hz]
        animationTime: 400, // [ms]
        stepSize: 100, // [px]

        // Pulse (less tweakable)
        // ratio of "tail" to "acceleration"
        pulseAlgorithm: true,
        pulseScale: 4,
        pulseNormalize: 1,

        // Acceleration
        accelerationDelta: 50,  // 50
        accelerationMax: 3,   // 3

        // Keyboard Settings
        keyboardSupport: true,  // option
        arrowScroll: 50,    // [px]

        // Other
        fixedBackground: true,
        excluded: ''
    };

    var options = defaultOptions;


    // Other Variables
    var isExcluded = false;
    var isFrame = false;
    var direction = { x: 0, y: 0 };
    var initDone = false;
    var root = document.documentElement;
    var activeElement;
    var observer;
    var refreshSize;
    var deltaBuffer = [];
    var deltaBufferTimer;
    var isMac = /^Mac/.test(navigator.platform);

    var key = {
        left: 37, up: 38, right: 39, down: 40, spacebar: 32,
        pageup: 33, pagedown: 34, end: 35, home: 36
    };
    var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };

采用 使用平滑滚动方案 1 (平滑) (推荐) 方案时 smoothscroll 库的部分代码

可以发现,由于 animationTime, stepSize, pulseScale 变量被设置为了不同的值,导致两个方案产生了不同的效果,这也是前者滚动速度过快的原因。

0 人点赞