相关疑难解决方法(0)

我想为mousewheel事件提供干净,漂亮的JavaScript,只支持最新版本的常见浏览器,而没有遗留代码的旧版本,没有任何JS框架.

鼠标轮事件在这里很好地解释.如何简化当前最新版本的浏览器？

我没有访问所有浏览器来测试它,所以caniuse.com对我很有帮助.唉,那里没有提到鼠标轮.

根据Derek的评论,我写了这个解决方案.它对所有浏览器都有效吗？

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
  e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
  // custom code
});

你好吗？我的问题:

如何控制或指定的方式文档滚动到由两种鼠标滚轮所描述的愿望的位置,和/或抓取滚动条.我想要的是克服页面滚动的特定默认方法.
当它正在工作时,页面向右跳转到滚轮上每个'凹口'下来的x#像素.或者直接转到拖动滚动条的位置.我正在寻找的是jquery的简单扩展,可以应用某些滚动规则.主体很简单.施加加速度,这将防止页面在没有首先加速的情况下移动得太快.可设置为以px/sec为单位的速率,可选择应用缓动功能...页面可以滑动/移动/拖动的最大px /秒.第三个是减速规则,当页面接近它的目标位置时应用(%,px？).这可能必须以多种方式之一进行计算,并且可能更棘手.即,当将最后25个像素滚动到目标位置时,减速度适用.还有更多...我想要准备的主要问题是确保我们完全支持小页面滚动而不是毛病.
可以使用哪种jQuery方法以这种方式控制文档？_kyle

更新:::感谢您关注此问题,如果您是.好消息.找到一个很棒的插件,希望可以处理以支持所需的效果,哟!我已经实现了一个整页容器并使用这个漂亮的jScrollPane脚本来命令你是否要滚动页面 http://jscrollpane.kelvinluck.com/fullpage_scroll.html

页面的性能已经有很大差异.来自滚轮的每个滚动凹口是浏览器原生滚动凹口的三分之一到一半,因此它移动得更慢,这很好,可调节.
不过,我们仍然有页面移动的失速 - 失速 - 失速方法.

我自己写javascript,但更像是我重写它.我认为需要做的是一个由沿着页面滚动的像素构建的"队列",总时间复合:然后定义并执行三个阶段的动画足迹,一个缓和加速,maxscrollspeed阶段和decel相.

任何人都可以就我们的方式提出任何建议

1. 从其滚动页面的本机功能中取出mousescrollwheel.

2. 听听mousescroll的缺口; 并且如果缺口:初始化核心功能以开始页面的移动,但也要监听并添加额外的缺口点击以"重新计算"并应用于窗口滚动替换先前的totaldistancetoscroll的"队列",在计算下一个totaldistancetoscroll之前,它提供了一种预测目的地和减速的方法.开始运动的核心功能不希望重新启动,导致加速时可能发生多次陷波咔嗒声,但只应重新计算何时何地减速.

再次抱歉没有发布任何实际代码,不确定从哪里开始,并希望有人可能知道mwintent是否会为此工作,如果是这样的话:也可能有一些想法如何将减速应用到滚动,这似乎是期望效果与当前插件状态之间的唯一两个区别是相似的.

我试图创建一个平滑的滚动体验**,当用户过度滚动时,*具有弹跳效果,即滚动太多到底部或顶部.这个答案回答了如何顺利滚动,但我也试图在它滚出界限时反弹.像这样的东西:

注意.虽然这个gif显示为移动设备,但我希望为所有浏览器,桌面设备和移动设备实现这一功能.

我尝试将以下代码添加到间隔:

// 50 = Padding
if (tgt.scrollTop < 50 || tgt.scrollTop > tgt.scrollHeight - tgt.offsetHeight - 50) {
    pos = Math.bounce(step++, start, change, steps);
} else {
    pos = Math.easeOut(step++, start, change, steps);
}

但它没有产生预期的效果.它不会在正确的滚动时间反弹,反弹不是真实的,它不够大.

(我正在寻找类似这种效果的东西,但我想自己创建它,并理解代码.)

当滚动到顶部或底部时,如何创建弹跳效果？

我不想要链接到复杂库的答案,因为我想自己创建它.我想要vanilla JavaScript.

的jsfiddle

console.clear();

/* Smooth scroll */
Math.easeOut = function(t, b, c, d) {
  t /= d;
  return -c * t * (t - 2) + b;
};

// Out Back Quartic
Math.bounce = function(t, b, …

我有一个固定的DIV #scroll-up,它是浏览器窗口的100%高度.我有另一个DIV #next-prev坐在它下面.一旦#next-prev进入视野,我希望#scroll-upDIV开始向上滚动.我的代码打击了这一点,但是只要#next-prev在视野中就会#scroll-up毫无理由地跳起来.效果应该是无缝的.

我该如何防止跳跃？

我在这里设置了jsFiddle问题的演示:http://jsfiddle.net/sya0jr6p/1/

JS

使用jQuery Visible插件检测#next-prev何时在视图中.

$(window).scroll(function() {

    if ($('#next-prev').visible(true)) {
        console.log ( '#next-prev visible' );

        // Initiate scroll up of '#scroll-up' when '#next-prev' is in the viewport
        var $tagline = $('#scroll-up');
        var windowScroll;

        // Function
        function slidingTitle() {

            //Get scroll position of window
            windowScroll = $(this).scrollTop();

            $tagline.css({
                'top' : -(windowScroll/3)+"px"
            });

        }
        // Initiate
        slidingTitle();

    } else {
        console.log ( '#next-prev not …