jQuery鼠标滚动脚本速度不会改变

时间:2015-04-17 07:53:48

标签: javascript jquery css html5

有一个谷歌......

尝试更改我的网站滚动设置&什么都没发生。

任何人都有关于鼠标滚动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 个答案:

答案 0 :(得分:3)

该脚本看起来有点过时了。不再使用.load()函数,也不再使用浏览器嗅探。使用鼠标滚轮插件(一个真正的宝石)的方法将更可靠和未来证明。这是一个使用它的脚本,使得函数本身非常紧凑:

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 ...如果有任何其他脚本取决于已弃用的功能(不是太多),有些东西可能会在它是更新。版本1.8中引入了.on方法 - 如果您想坚持使用旧版本,则上述脚本需要进行少量重写。

答案 1 :(得分:1)

在脚本标记

中添加此功能

并在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

检查天气这是你想要的