解决div定位为fixed时，无法横向滚动的问题

最新推荐文章于 2024-07-16 17:18:30 发布

_嶙峋_

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量1.7k

点赞数 3

分类专栏：前端文章标签： css 前端 html js

本文链接：https://blog.csdn.net/qq_35591402/article/details/127884475

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解决div定位为fixed时，无法横向滚动的问题

问题：
在自定义固定表头时，使用了fixed定位，但由于表的内容过长需要横向滚动，由于fixed固定了位置，此时表头无法一起滚动
解决办法：
监听滚动条的滚动距离（scrollLeft），实时改变固定元素的left以实现元素和滚动条一起移动。

function headScroll() {
	var thead = document.querySelector("#ganttChart .ganttview-hzheader");
	var tbody = document.querySelector("#ganttChart .ganttview-slide-container");
	tbody.addEventListener('scroll', function(){
		var sl = -tbody.scrollLeft;
		thead.style.left = sl + 'px';
	})
}