功能描述
最近寫了一個效果,點擊事件中控制當前頁面滾動到指定位置。用到方法:
document.getElementById('lcukCard').scrollIntoView();

問題描述1、滑動之后時候,頁面底部顯示超出js點擊滑動到指定位置,且手動滑動的頁面向上的時候,滑不到頂部
查閱了文檔 發現() 方法是讓當前的元素滾動到瀏覽器窗口的可視區域內。之前的設計中js點擊滑動到指定位置,用img 標簽絕對定位了背景圖,如果樣式對html 或者 body 設置了高度,導致內容向上移動,底部圖片超出。
解決方式
將圖片設置成css方式引入,將父元素相對定位一下
background: url("../img/a.png") no-repeat;

background-size: 100% 100%;
2、滑動的時候采用{: ''},發現安卓手機默認居中,而瀏覽器默認頂部對齊解決方式
()方法的參數是一個對象,屬性中的block 定義了滑動之后的對其方式,修改成:
document.getElementById('lcukCard').scrollIntoView({ behavior: 'smooth', block:"start"})