本文重点解决jQuey源码解析(二十八)样式操作模块scollLef和scollTop详解问题,希望能够帮助到你
scrollLeft和scrollTop用于获取/设置滚动条的，如下:
如果没有传入val值则获取滚动条距离，如果有设置val则标识设置滚动条距离，还是举个栗子，以scrollTop为例，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> *{margin:0;padding:0;} button{margin:1px 0;} div{margin:20px;width: 200px;height: 180px;position: relative;padding-top: 20px;background: #c38;} h1{margin:10px;color: #333;} </style> </head> <body> <br/> <p id="result">结果:<span></span></p> <button id="b1">获取垂直滚动条距离</button><br/> <button id="b2">回到首页</button> <br/><br/> <script> $('#b1').click(()=>{ //获取滚动条距离 $('span').text( $(window).scrollTop() ) }) $('#b2').click(()=>{ //设置垂直滚动条滚动到顶部 $(window).scrollTop(0) }) //这里先新增一个文档碎片，然后添加50个p标签，最后添加到body子节点的最前面，以模拟滚动条 { let i=1,fragments=document.createDocumentFragment() while(i<=50){ let p = document.createElement('p'); p.innerHTML = i++; fragments.append(p) } document.body.insertBefore(fragments,document.body.childNodes[0]) } </script> </body> </html>
本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。
微信扫一扫打赏
支付宝扫一扫打赏
扫码加微信好友
© 2002-2022 星联科技(xinglianwangluo.com) 版权所有，并保留所有权利 老妖怪 蜀ICP备2024091751号-1
四川省广元市利州区
川公网安备 51080202000147号
