解决 Argon 主题浏览页面时滑动过快的问题
解决 Argon 主题浏览页面时滑动过快的问题
解决 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 库的不同，我得到了答案：
//
// 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 库的部分代码
//
// 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 变量被设置为了不同的值，导致两个方案产生了不同的效果，这也是前者滚动速度过快的原因。