有个需求是 table 的thead 固定在表头,tbody可以滚动,由于tbody里边有些复杂,所以直接在tbody加滚动条不合适,我使用position: fixed固定住thead,但是遇到问题,由于table宽度是很宽的,水平移动滚动条时,页面动了但是使用 position: fixed固定住的thead不能跟随滚动,解决方案如下:
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #fixed { position: fixed; left: 0px; top: 0px; border: solid 1px #000; width: 100%; background: #fff } </style> </head> <body> <div id="fixed">fixed定位容器</div> <div style="width:2000px;height:2000px">内容</div> <script> window.onscroll = function () { var sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft); document.getElementById('fixed').style.left = sl + 'px'; } </script> </body> </html>
0
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里
上一篇: table
下一篇: es6箭头函数需要注意的地方