Javascript - 实现Javascript控制ScrollBar(滚动条) - 学习/实践

1.应用场景

主要用于控制srollbar的位置, 实现界面定位效果.

2.学习/操作

在Javascript中有三种方法能够控制滚动条的位置. 方法一：用scroll函数实现 scroll(x,y); x代表横向滚动条的位置，也就是控制左右位置，当为0时, 代表最左边，当为document.body.scrollWidth时, 代表最右边. y代表纵向滚动条的位置，也就是控制上下位置，当为0时, 代表最上面，当为document.body.scrollHeight时, 代表最底部. 方法二：用scrollBy函数实现 scrollBy(x,y); x和y代表的意思和第一个方法一样; 方法三：用scrollTo函数实现 scrollTo(x,y); 扫描二维码关注公众号，回复： 12889230 查看本文章 x和y代表的意思和第一个方法一样; 另外顺便说一句，如果你是在框架(Frame)中要控制父框架的滚动条，那么要记得在函数前加parent， 举个例子来说就是parent.scroll(0, 0); 用Javascript控制ScrollBar(滚动条) 以下都是默认自动滚动到底部，需要滚动到顶部只需将document.body.scrollHeight换为0. 需求: 1.将srollbar拉到底部 document.body.scrollTop = document.documentElement.scrollTop = document.body.scrollHeight; 2.垂直方向距离顶部800px. scroll(0, 800); // 这里横向并没有scrollbar 或者 document.body.scrollTop = document.documentElement.scrollTop = 800; 后续补充 ...

3.问题/补充

1.获取scroll滚动条高度/宽度  // 20201130 window.scrollY 当前滚动的高度 window.scrollMaxY 当前滚动条的总高度. 2. 封装函数[设置滚动条高度]  // 滑动效果 code function setScrollHeight(num: number) {     scrollTo({       top: num,       behavior: 'smooth',     });   }

4.参考

https://www.cnblogs.com/plzdaye/p/3971421.html https://wangdoc.com/javascript/dom/element.html#elementscrollheight%EF%BC%8Celementscrollwidth

后续补充

...