在javascript中平滑滚动？ [英] Smooth scrolling in javascript?

问题描述

在jQuery中，您可以执行以下操作：

In jQuery you can do things like

$('html, body').stop().animate({
    'scrollTop': $target.offset().top
}, 1000);

我对如何在Javascript中处理这个问题感兴趣？

And I'm interested how to handle this in Javascript only?

谢谢！

推荐答案

这个问题通常用功能回答利用 setInterval / setTimeout 并以微小的增量滚动元素，请参阅：跨浏览器JavaScript（不是jQuery ...）滚动到顶部动画

This question is usually answered with a function utilizing setInterval / setTimeout and scrolling the element in tiny increments, see: Cross browser JavaScript (not jQuery...) scroll to top animation

我想提出另一种更现代的方法，使用动态添加的CSS过渡，这应该更顺畅，更少耗费CPU。它使用CSS激活 body ，JavaScript仅计算并设置元素的 translateY（）变换。 CSS动画结束后，删除变换并设置滚动位置。

I'd like to propose another, more modern way of doing it using dynamically added CSS transition, which should be smoother and less CPU-hungry. It animates the body using CSS, JavaScript only calculates and sets translateY() transform on the element. After the CSS animation finishes the transform is removed and scroll position is set.

演示： http://jsfiddle.net/00uw1Lq9/4/ （跨浏览器修复后的更新链接）。

Demo: http://jsfiddle.net/00uw1Lq9/4/ (updated link after cross-browser fixes).

仅作品在具有无前缀转换和转换的浏览器中（在IE11，当前Chrome和Firefox中测试），对于旧版本，您可能需要添加前缀检测。它也可能在某些方面被打破，把它当作一个起点而不是解决方案。

Works only in browsers with unprefixed transitions and transforms (tested in IE11, current Chrome and Firefox), for older versions you may need to add prefix detection. It's also probably broken in some ways, treat it as a starting point, not a solution.

// this function self-initializes and attaches an event listener to the root element
var smoothScroll = (function(root){
     //keep track of the target element between scrolling function and transitionend callback
     var targetElement;
    // called when the CSS transition finishes
    root.addEventListener('transitionend', function(e){
        // remove transition and transform
        root.style['transition'] = '';
        root.style['transform'] = '';
        // do the actual scrolling
        targetElement.scrollIntoView();
    });
    // this function fill be available as the smoothScroll function
    return function(element, time){
        // get the top position of target element
        var offset = element.offsetTop - root.scrollTop;
        // if the element is very low it can't get scrolled up to the top of the window
        offset = Math.min( offset, root.offsetHeight - document.documentElement.clientHeight );
        // save reference to the target element for callback
        targetElement = element;
        // set transfor/transition CSS properties
        root.style['transition'] = 'transform';
        root.style['transition-duration'] = time;
        // this fakes the scrolling animation by animating transform on the element
        root.style['transform'] = 'translateY(' + offset * -1 +'px)';
    }
}(document.body));

用法： smothScroll（DOMNodeReference，时间） ，其中 time 是一个对CSS transition-duration 属性有效的字符串（例如'300ms '或'2.5s'）。

Usage: smothScroll( DOMNodeReference, time ), where time is a string valid for CSS transition-duration property (for example '300ms' or '2.5s').

这篇关于在javascript中平滑滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！