div固定在页面左边,拖动横向滚动条依然在屏幕中页面的左边

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

原理已在注释中说明,例子不算很完美(滚动过快会闪烁,需要额外增加缓冲效果解决),仅供参考。

参考技术A 讲div的position设置为fixed然后再根据left,top来定位到想要显示的地方,不过fixed在IE6中不怎么支持。但是IE6已经淘汰了,应该问题不大。追问

给个小例子呗

追答<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 我觉得还是哪个什么来着,就是……我忘了

以上是关于div固定在页面左边,拖动横向滚动条依然在屏幕中页面的左边的主要内容,如果未能解决你的问题,请参考以下文章

table左边固定-底部横向滚动条

html 自动显示横向滚动条

如何控制DIV横向滚动条在顶部显示呢,不想每次在最下面去拖动

如何让DIV模块随着页面固定和不固定随意切换

ElementUI Table横向滚动条遇到的问题汇总

js设置横向滚动条