滾動條相容問題

滾動條距離頂部的距離

let ele=document.getElementById(“demo”)

console.log(ele.scrollTop)

滾動條距離底部的距離

let ele=document.getElementById(“demo”)

console.log(ele.scrollHeight-ele.scrollTop-ele.clientHeight)

滾動到頂部

document.documentElement.scrollTo(0,0)

自定義滾動條樣式

......

.beauty-scroll{

scrollbar-color: #1890FF #91D5FF;

/* 以下是chrome浏覽器自定義滾動條樣式方式 */
  &::-webkit-scrollbar {/*滾動條整體樣式*/
        width: 3px;     /*高寬分别對應橫豎滾動條的尺寸*/
        height: 1px;
  }
  &::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        background: #1890FF;
}
  &::-webkit-scrollbar-track {/*滾動條裡面軌道*/
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 3px;
        background: #91D5FF;
  }
           

}

【轉載】原文連結https://www.cnblogs.com/huihuihero/p/11640966.html