jQuery鼠标滚动脚本速度不会改变
jQuery鼠标滚动脚本速度不会改变
提问于 2015-04-17 15:53:48
用谷歌..。
尝试更改我的网站滚动设置&什么都没有发生。
谁有一个关于鼠标滚动的jQuery脚本和函数的写法或表格？
(已清除缓存、跨浏览器测试等)
jQuery(window).load(function(){
if(checkBrowser() == 'Google Chrome' && device.windows()){
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 330;
var distance = 300;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 90;
else if (event.detail) delta = -event.detail / 3;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {
jQuery('html, body').stop().animate({
scrollTop: jQuery(window).scrollTop() - (distance * delta)
}, time);
}
}
});
function checkBrowser(){
var ua = navigator.userAgent;
if (ua.search(/MSIE/) > 0) return 'Internet Explorer';
if (ua.search(/Firefox/) > 0) return 'Firefox';
if (ua.search(/Opera/) > 0) return 'Opera';
if (ua.search(/Chrome/) > 0) return 'Google Chrome';
if (ua.search(/Safari/) > 0) return 'Safari';
if (ua.search(/Konqueror/) > 0) return 'Konqueror';
if (ua.search(/Iceweasel/) > 0) return 'Debian Iceweasel';
if (ua.search(/SeaMonkey/) > 0) return 'SeaMonkey';
if (ua.search(/Gecko/) > 0) return 'Gecko';
return 'Search Bot';
}回答 2
Stack Overflow用户
发布于 2015-04-17 16:16:12
这个脚本看起来有点过时了。.load()函数不再以这种方式使用，浏览器嗅探也被弃用。使用鼠标滚轮插件(一个真正的gem)的方法会更可靠，也是未来的证明。下面是一个使用它的脚本，使函数本身非常紧凑：
http://codepen.io/anon/pen/KpPdmX?editors=001
jQuery(window).on('load', function() {
var time = 330;
var distance = 300;
jQuery(this).mousewheel(function(turn, delta) {
jQuery('html, body').stop().animate({
scrollTop: jQuery(window).scrollTop()-(distance*delta)
}, time);
return false;
});
});
// mousewheel.js can be placed here, outside of function scope这个插件需要一些额外的脚本，但这是非常值得的。还有一个wheel事件，但不幸的是Opera仍然不支持它。在任何情况下，都需要更多的代码来标准化鼠标滚轮旋转的增量(这是mousewheel.js最擅长的地方)。
我猜$字符在网页上是保留的，但如果不是，jQuery引用可以用它代替。顺便说一句--你可能想检查一下站点上链接的jQuery版本……如果有任何其他脚本依赖于不推荐使用的功能(并不是说有太多)，那么当它更新时，一些东西可能会停止正常工作。.on方法是在1.8版本中引入的-如果你想继续使用旧版本，上面的脚本需要稍微重写一下。
Stack Overflow用户
发布于 2015-04-17 16:14:26
将此函数添加到脚本标记中
并在body标记中添加data-scroll-speed="10“。你可以调整车身的滚动速度
$(function () {
var boxes = $('[data-scroll-speed]'),
$window = $(window);
$window.on('scroll', function () {
var scrollTop = $window.scrollTop();
boxes.each(function () {
var $this = $(this),
scrollspeed = parseInt($this.data('scroll-speed')),
val = -(scrollTop / scrollspeed);
$this.css('transform', 'translateY(' + val + 'px)');
});
});
})示例: fiddled here
检查一下这是否是你想要的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29693415
复制相关文章
相似问题
腾讯云开发者
