css Div在页面中纵向固定，不随滚动条滚动，横向随滚动条滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Div在页面中纵向固定，不随滚动条滚动，横向随滚动条滚动相关的知识，希望对你有一定的参考价值。
纵向固定在左上角，横向可以滚动
可能会分3种情况：1、浏览器的窗体滚动，这个估计每个浏览器都不一样，记得以前IE中纵向不超屏幕，横向超过一屏，用滚轮就横着滚，没测试。
2、iframe中的窗体滚动。
3、div中的内容overflow滚动。
1是随着屏幕分辨率计算，比较难控制。
2与3是可以用宽度高度控制，也可以由js判断初始化或者后续控制。
有了这些基础后，推荐使用js进行控制，当scroll的时候把y轴的变化转换到x轴上，根据以上情况的不同，控制好用户体验。追问
不明白
追答试试理解吧，或者提出你的不明白之处。
参考技术A 你是说的背景吗？position:flex
生成绝对定位的元素，相对于浏览器窗口进行定位。 参考技术B 使用position:flex；
div固定在页面左边,拖动横向滚动条依然在屏幕中页面的左边
如题,css实现div的悬浮处理,让他不随横向滚动条的拖动改变在屏幕中的位置
额 我的意思是这个div随这横向滚动条的向左右拖动也随着左右动,始终在屏幕的一个位置不消失
.给个简单的小例子 多谢
因为IE6的兼容性问题，所以这不考虑用fixed，代码如下，用了js的滚动事件
<html><head>
<meta charset="utf-8" />
<!-- CSS部分，宽度各100，红色背景，加了定位属性。 -->
<style>
*margin:0;padding:0;
#div1width:100px;height:100px;background:#F00;position:absolute;top:100px;left:0;
</style>
</head>
<body style="width:5000px;height:500px;background:#F7F7F7;">
<div id="div1">我是固定的</div>
</body>
<!-- js控制 开始 -->
<script>
//添加滚动事件
window.onscroll=function()
//获取横向滚动距离的值
var nWidth=document.documentElement.scrollLeft||document.body.scrollLeft;
//获取div标签对象
var oDiv=document.getElementById('div1');
//将div的left值更改为横向滚动值，从而达到固定位置的目的
oDiv.style.left=nWidth+'px';
</script>
<!-- js控制 结束 -->
</html>
原理已在注释中说明，例子不算很完美（滚动过快会闪烁，需要额外增加缓冲效果解决），仅供参考。
给个小例子呗
追答<div class="test">我不动</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<style>
.test
position:fixed;
border:1px solid #ccc;
width:40px;
height:40px;
left:10px;
top:100px;
</style>
<!---把上面的代码放在页面的body中的任意地方-->
追问额 我的意思是这个div随这横向滚动条的向左右拖动也随着左右动,始终在屏幕的一个位置不消失
参考技术B 我觉得还是哪个什么来着，就是……我忘了以上是关于css Div在页面中纵向固定，不随滚动条滚动，横向随滚动条滚动的主要内容，如果未能解决你的问题，请参考以下文章
[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动
如何固定table的第一行，不随纵向滚动条滚动，但能横向滚动