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

一时失言乱红尘 2022-12-24 08:55 324阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于控制srollbar的位置, 实现界面定位效果.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

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

3.问题/补充

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

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://www.cnblogs.com/plzdaye/p/3971421.html" rel="nofollow">https://www.cnblogs.com/plzdaye/p/3971421.html</a> <a href="https://wangdoc.com/javascript/dom/element.html#elementscrollheight%EF%BC%8Celementscrollwidth" rel="nofollow">https://wangdoc.com/javascript/dom/element.html#elementscrollheight%EF%BC%8Celementscrollwidth</a> </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...