滚动条兼容问题

滚动条距离顶部的距离

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