分享一個頁面平滑滾動小技巧

時間 2019-11-06

標籤分享一個頁面平滑滾動技巧简体版

原文原文鏈接

背景

今天寫需求的時候發現一個小的優化點：用戶選擇了一些數據以後, 對應列表中的數據須要高亮，有時候列表很長，爲了提高用戶體驗，須要加個滾動，自動滾動到目標位置。css

簡單的處理了一下，問題順利解決，就把這個小技巧分享一下給你們。html

正文

有幾種不一樣的方式來解決這個小問題。前端

1.scrollTop

第一想到的仍是scrollTop, 獲取元素的位置，而後直接設置:segmentfault

// 設置滾動的距離
element.scrollTop = value;

不過這樣子有點生硬，能夠加個緩動：瀏覽器

var scrollSmoothTo = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            return setTimeout(callback, 17);
        };
    }
    // 當前滾動高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滾動step方法
    var step = function () {
        // 距離目標滾動距離
        var distance = position - scrollTop;
        // 目標滾動位置
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};

// 平滑滾動到頂部，能夠直接：

scrollSmoothTo(0)

jQuery 中重的animate 方法也能夠實現相似的效果：學習

$('xxx').animate({
    scrollTop: 0
});

2. scroll-behavior

把 scroll-behavior:smooth; 寫在滾動容器元素上，也能夠讓容器（非鼠標手勢觸發）的滾動變得平滑。優化

.list {
   scroll-behavior: smooth; 
}

在PC上, 網頁默認滾動是在<html>標籤上的，移動端大多數在<body> 標籤上, 那麼這行定義到全局的css中就是:spa

html, body { 
  scroll-behavior:smooth; 
}

美滋滋。rest

3. scrollIntoView

Element.scrollIntoView() 方法, 讓當前的元素滾動到瀏覽器窗口的可視區域內。code

語法:

var element = document.getElementById("box");

element.scrollIntoView(); // 等同於element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型參數 
element.scrollIntoView(scrollIntoViewOptions); // Object型參數

scrollIntoView 方法接受兩種形式的值：

布爾值

若是爲true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。
- 相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。
若是爲false，元素的底端將和其所在滾動區的可視區域的底端對齊。
- 相應的scrollIntoViewOptions: { block: "end", inline: "nearest" }。

Options 對象

{
    behavior: "auto" | "instant" | "smooth", 默認爲 "auto"。
    block: "start" | "end", 默認爲 "start"。
    inline: "start"| "center"| "end", | "nearest"。默認爲 "nearest"。
}

behavior表示滾動方式。auto表示使用當前元素的scroll-behavior樣式。instant和smooth表示直接滾到底和使用平滑滾動。
block表示塊級元素排列方向要滾動到的位置。對於默認的writing-mode: horizontal-tb來講，就是豎直方向。start表示將視口的頂部和元素頂部對齊；center表示將視口的中間和元素的中間對齊；end表示將視口的底部和元素底部對齊；nearest表示就近對齊。
inline表示行內元素排列方向要滾動到的位置。對於默認的writing-mode: horizontal-tb來講，就是水平方向。其值與block相似。