關(guān)于scrollIntoView和scrollIntoViewIfNeeded

由于遇到了需要將指定元素滾動到頁面中的需求。然后發(fā)現(xiàn)了H5有兩個可以實現(xiàn)相應(yīng)效果，但都有兼容性問題。圖片如下。

  • scrollIntoView的兼容性


  • scrollIntoViewIfNeeded的兼容性



    根據(jù)需要決定使用哪個。

scrollIntoView

參數(shù)可以為boolean或者options

  • Boolean:
    • true:元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊
    • false:元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊
  • options:{behavior,block,inline}
    • behavior:動畫過渡效果,"auto"或者"smoth",默認(rèn)為"auto"
    • block:垂直方向的對齊,"start", "center", "end", 或 "nearest"之一
    • inline:水平方向的對齊,"start", "center", "end", 或 "nearest"之一

注意:
取決于其它元素的布局情況，此元素可能不會完全滾動到頂端或底端。

規(guī)范

scrollIntoViewIfNeeded

該方法pc端兼容性很差，基本排除使用的可能性。但移動端還是可以使用的。
參數(shù):Boolean，默認(rèn)為true。

  • true :則元素將在其所在滾動區(qū)的可視區(qū)域中居中對齊
  • false: 則元素將與其所在滾動區(qū)的可視區(qū)域最近的邊緣對齊。 根據(jù)可見區(qū)域最靠近元素的哪個邊緣，元素的頂部將與可見區(qū)域的頂部邊緣對準(zhǔn)，或者元素的底部邊緣將與可見區(qū)域的底部邊緣對準(zhǔn)。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容