查看此网站 - https://www.eviltech.in/
鼠标滚动键在 Google Chrome 和 Mozilla Firefox 中不工作，但在 Microsoft Edge 中工作正常。
如上所示，如果 CSS overflow:hidden 到 body 或 html，滚动键可能不起作用，但这里不是这种情况.滚动条在所有浏览器中都是可见的，可以通过拖动滚动条来滚动网站。
还有其他可能发生这种情况的情况吗？解决方案是什么？
更新:
@ChrisHappy 在 javascript 文件 wow.js 中发现了这个问题
我无法从网站上删除整个 wow.js，因为它执行网站所需的关键动画。
下面是 wow.js 代码:
(function() {
var MutationObserver, Util, WeakMap, __bind = function(fn, me) {
return function() {
return fn.apply(me, arguments)
}
},
__indexOf = [].indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item) return i
}
return -1
};
Util = (function() {
function Util() {}
Util.prototype.extend = function(custom, defaults) {
var key, value;
for (key in custom) {
value = custom[key];
if (value != null) {
defaults[key] = value
}
}
return defaults
};
Util.prototype.isMobile = function(agent) {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
};
return Util
})();
WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
function WeakMap() {
this.keys = [];
this.values = []
}
WeakMap.prototype.get = function(key) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
if (item === key) {
return this.values[i]
}
}
};
WeakMap.prototype.set = function(key, value) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
if (item === key) {
this.values[i] = value;
return
}
}
this.keys.push(key);
return this.values.push(value)
};
return WeakMap
})());
MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
function MutationObserver() {
console.warn('MutationObserver is not supported by your browser.');
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.')
}
MutationObserver.notSupported = !0;
MutationObserver.prototype.observe = function() {};
return MutationObserver
})());
this.WOW = (function() {
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: !0,
live: !0
};
function WOW(options) {
if (options == null) {
options = {}
}
this.scrollCallback = __bind(this.scrollCallback, this);
this.scrollHandler = __bind(this.scrollHandler, this);
this.start = __bind(this.start, this);
this.scrolled = !0;
this.config = this.util().extend(options, this.defaults);
this.animationNameCache = new WeakMap()
}
WOW.prototype.init = function() {
var _ref;
this.element = window.document.documentElement;
if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
this.start()
} else {
document.addEventListener('DOMContentLoaded', this.start)
}
return this.finished = []
};
WOW.prototype.start = function() {
var box, _i, _len, _ref;
this.stopped = !1;
this.boxes = this.element.getElementsByClassName(this.config.boxClass);
this.all = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box)
}
return _results
}).call(this);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle()
} else {
_ref = this.boxes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
this.applyStyle(box, !0)
}
window.addEventListener('scroll', this.scrollHandler, !1);
window.addEventListener('resize', this.scrollHandler, !1);
this.interval = setInterval(this.scrollCallback, 50)
}
}
if (this.config.live) {
return new MutationObserver((function(_this) {
return function(records) {
var node, record, _j, _len1, _results;
_results = [];
for (_j = 0, _len1 = records.length; _j < _len1; _j++) {
record = records[_j];
_results.push((function() {
var _k, _len2, _ref1, _results1;
_ref1 = record.addedNodes || [];
_results1 = [];
for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
node = _ref1[_k];
_results1.push(this.doSync(node))
}
return _results1
}).call(_this))
}
return _results
}
})(this)).observe(document.body, {
childList: !0,
subtree: !0
})
}
};
WOW.prototype.stop = function() {
this.stopped = !0;
window.removeEventListener('scroll', this.scrollHandler, !1);
window.removeEventListener('resize', this.scrollHandler, !1);
if (this.interval != null) {
return clearInterval(this.interval)
}
};
WOW.prototype.sync = function(element) {
if (MutationObserver.notSupported) {
return this.doSync(this.element)
}
};
WOW.prototype.doSync = function(element) {
var box, _i, _len, _ref, _results;
if (!this.stopped) {
element || (element = this.element);
element = element.parentNode || element;
_ref = element.getElementsByClassName(this.config.boxClass);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (__indexOf.call(this.all, box) < 0) {
this.applyStyle(box, !0);
this.boxes.push(box);
this.all.push(box);
_results.push(this.scrolled = !0)
} else {
_results.push(void 0)
}
}
return _results
}
};
WOW.prototype.show = function(box) {
this.applyStyle(box);
return box.className = "" + box.className + " " + this.config.animateClass
};
WOW.prototype.applyStyle = function(box, hidden) {
var delay, duration, iteration;
duration = box.getAttribute('data-wow-duration');
delay = box.getAttribute('data-wow-delay');
iteration = box.getAttribute('data-wow-iteration');
return this.animate((function(_this) {
return function() {
return _this.customStyle(box, hidden, duration, delay, iteration)
}
})(this))
};
WOW.prototype.animate = (function() {
if ('requestAnimationFrame' in window) {
return function(callback) {
return window.requestAnimationFrame(callback)
}
} else {
return function(callback) {
return callback()
}
}
})();
WOW.prototype.resetStyle = function() {
var box, _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box.setAttribute('style', 'visibility: visible;'))
}
return _results
};
WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
if (hidden) {
this.cacheAnimationName(box)
}
box.style.visibility = hidden ? 'hidden' : 'visible';
if (duration) {
this.vendorSet(box.style, {
animationDuration: duration
})
}
if (delay) {
this.vendorSet(box.style, {
animationDelay: delay
})
}
if (iteration) {
this.vendorSet(box.style, {
animationIterationCount: iteration
})
}
this.vendorSet(box.style, {
animationName: hidden ? 'none' : this.cachedAnimationName(box)
});
return box
};
WOW.prototype.vendors = ["moz", "webkit"];
WOW.prototype.vendorSet = function(elem, properties) {
var name, value, vendor, _results;
_results = [];
for (name in properties) {
value = properties[name];
elem["" + name] = value;
_results.push((function() {
var _i, _len, _ref, _results1;
_ref = this.vendors;
_results1 = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
_results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value)
}
return _results1
}).call(this))
}
return _results
};
WOW.prototype.vendorCSS = function(elem, property) {
var result, style, vendor, _i, _len, _ref;
style = window.getComputedStyle(elem);
result = style.getPropertyCSSValue(property);
_ref = this.vendors;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property)
}
return result
};
WOW.prototype.animationName = function(box) {
var animationName;
try {
animationName = this.vendorCSS(box, 'animation-name').cssText
} catch (_error) {
animationName = window.getComputedStyle(box).getPropertyValue('animation-name')
}
if (animationName === 'none') {
return ''
} else {
return animationName
}
};
WOW.prototype.cacheAnimationName = function(box) {
return this.animationNameCache.set(box, this.animationName(box))
};
WOW.prototype.cachedAnimationName = function(box) {
return this.animationNameCache.get(box)
};
WOW.prototype.scrollHandler = function() {
return this.scrolled = !0
};
WOW.prototype.scrollCallback = function() {
var box;
if (this.scrolled) {
this.scrolled = !1;
this.boxes = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (!(box)) {
continue
}
if (this.isVisible(box)) {
this.show(box);
continue
}
_results.push(box)
}
return _results
}).call(this);
if (!(this.boxes.length || this.config.live)) {
return this.stop()
}
}
};
WOW.prototype.offsetTop = function(element) {
var top;
while (element.offsetTop === void 0) {
element = element.parentNode
}
top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop
}
return top
};
WOW.prototype.isVisible = function(box) {
var bottom, offset, top, viewBottom, viewTop;
offset = box.getAttribute('data-wow-offset') || this.config.offset;
viewTop = window.pageYOffset;
viewBottom = viewTop + this.element.clientHeight - offset;
top = this.offsetTop(box);
bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop
};
WOW.prototype.util = function() {
return this._util || (this._util = new Util())
};
WOW.prototype.disabled = function() {
return !this.config.mobile && this.util().isMobile(navigator.userAgent)
};
return WOW
})()
}).call(this)
是否可以删除影响滚动的代码行而不影响此处的其他功能？
更新 2:我尝试删除整个 wow.js，但滚动仍然没有修复，许多重要功能停止工作。
这意味着问题不在于 wow.js 文件。
还有其他可能导致此问题的原因吗？
最佳答案
JS 文件 rd-smoothscroll.min.js 有问题
删除整个 JS 文件已解决问题。
! function(t, i, o) {
"use strict";
var e = "ontouchstart" in t,
r = ("undefined" != typeof InstallTrigger, "webkitTransform" in i.documentElement.style);
t.requestAnimFrame = function() {
return t.requestAnimationFrame || t.webkitRequestAnimationFrame || t.mozRequestAnimationFrame || t.oRequestAnimationFrame || t.msRequestAnimationFrame || function(i) {
t.setTimeout(i, 1e3 / 60)
}
}(), t.RDSmoothScroll = function() {
this.options = RDSmoothScroll.Defaults, this.animators = [], this.initialize()
}, RDSmoothScroll.Defaults = {
friction: .95,
step: 2,
minDistance: .1
}, RDSmoothScroll.Animator = function(t) {
var i = "html" === t.nodeName.toLowerCase() && r ? t.children[t.children.length - 1] : t;
this.target = t, this.originalTarget = i, this.direction = o, this.currentY = i.scrollTop, this.targetY = i.scrollTop, this.lastY = i.scrollTop, this.delta = 0, this.minY = 0, this.maxY = o, this.isPlaying = !1, this.speed = 0
}, RDSmoothScroll.Animator.prototype.update = function(i) {
var o = t.RDSmoothScroll.instance,
e = i.detail ? -1 * i.detail : i.wheelDelta / 40,
r = 0 > e ? -1 : 1;
r != this.direction && (this.speed = 0, this.direction = r), this.currentY = -this.originalTarget.scrollTop, this.delta = e, this.targetY += e, this.speed += (this.targetY - this.lastY) * o.options.step, this.lastY = this.targetY, this.start()
}, RDSmoothScroll.Animator.prototype.start = function() {
this.isPlaying || (this.isPlaying = !0, t.jQuery && t.jQuery(this.originalTarget).stop(), this.play())
}, RDSmoothScroll.Animator.prototype.play = function() {
var t = this;
this.isPlaying && (requestAnimFrame(function() {
t.play()
}), this.render())
}, RDSmoothScroll.Animator.prototype.stop = function() {
this.isPlaying && (this.speed = 0, this.isPlaying = !1)
}, RDSmoothScroll.Animator.prototype.render = function() {
var i = t.RDSmoothScroll.instance;
Math.abs(this.originalTarget.scrollTop - -this.currentY) > Math.abs(this.delta) && Math.abs(this.originalTarget.scrollTop - -this.currentY) > 1 && this.stop(), this.speed < -i.options.minDistance || this.speed > i.options.minDistance ? (this.currentY = this.currentY + this.speed, this.currentY > this.minY ? this.currentY = this.speed = 0 : this.currentY < this.maxY && (this.speed = 0, this.currentY = this.maxY), this.originalTarget.scrollTop = -this.currentY, this.speed *= i.options.friction) : this.stop()
}, RDSmoothScroll.prototype.initialize = function() {
t.addEventListener("mousewheel", this.onWheel), t.addEventListener("DOMMouseScroll", this.onWheel)
}, RDSmoothScroll.prototype.onWheel = function(i) {
if (!i.ctrlKey) {
var o, e, r = t.RDSmoothScroll.instance;
for (i.preventDefault(), o = i.target; null !== o && "html" != o.nodeName.toLocaleLowerCase() && !(("auto" == t.getComputedStyle(o).getPropertyValue("overflow") || "scroll" == t.getComputedStyle(o).getPropertyValue("overflow")) && o.scrollHeight > o.clientHeight && o.clientHeight > 0);) o = o.parentNode;
if (null != o) {
e = r.isAnimator(o) ? r.getAnimator(o) : r.createAnimator(o);
for (var n in r.animators) r.animators[n] !== e && r.animators[n].stop && r.animators[n].stop();
e.update(i)
}
}
}, RDSmoothScroll.prototype.createAnimator = function(t) {
return this.animators[this.animators.push(new RDSmoothScroll.Animator(t)) - 1]
}, RDSmoothScroll.prototype.isAnimator = function(t) {
for (var i in this.animators)
if (this.animators[i].target === t) return !0;
return !1
}, RDSmoothScroll.prototype.getAnimator = function(t) {
for (var i in this.animators)
if (this.animators[i].target === t) return this.animators[i];
return o
}, e || (t.RDSmoothScroll.instance = new RDSmoothScroll)
}(window, document)
关于javascript - 鼠标滚动键在网站上的 Chrome 和 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46482061/