2018年 js 簡易控制滾動條滾動的簡單方法

首先是es2015 的新api

Element.scrollIntoView()  // 滾動到最上方 等同於 dom.scrollIntoView(true) 
Element.scrollIntoView(false) // 滾動到最下方
文檔地址
![https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

還有一個WebKit專有的方法

element.scrollIntoViewIfNeeded();
element.scrollIntoViewIfNeeded(true);
element.scrollIntoViewIfNeeded(false);

// 如果為true，則元素將在其所在滾動區的可視區域中居中對其。
// 如果為false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。 根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對准，或者元素的底部邊緣將與可見區域的底部邊緣對准。
文檔地址
![https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded)

不考慮瀏覽器兼容的小伙伴們可以隨意使用了

通用的，精確的方法
使用scrollTop scrollLeft
比如document.querySelector("header-nav").scrollLeft = 20 // 導航欄往右滾20px
比如document.querySelector("main").scrollTop = 20 // 內容區往下滾20px

注意，得出現滾動條才能滾動，如果不能滾動，嘗試下再父級添加高度或寬度，overflow:auto