浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 div（最外层包含容容器代替默认的视窗），是滚动天出现在最外层容器上，从而解决决定定位的元素滚动的问题。CSS 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        *{
            margin: 0;
            padding: 0px;
        }
        html,body{
            height:100%;
            overflow: hidden;
        }

        #wrapper{
            height:100%;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div style="height: 200px; width:200px;background-color: pink;position:absolute; left: 20px;top:20px;"></div>
    <div style="height: 2000px;"></div>
</div>
</body>
</html>

　　

css 禁用浏览器滚动条，初始最外层包含容器 wrapper的更多相关文章

  1. CSS 禁止浏览器滚动条的方法(转)

    1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条: <boby scroll="no"> 这个我用的时候完全没效果 ...

  2. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  3. （转）CSS 禁止浏览器滚动条的方法

    1.完全隐藏 在里加入scroll="no",可隐藏滚动条:    这个我用的时候完全没效果,不知道是什么原因!不过好多人说这么用可以,大概是用的位置不一样吧   2.在不需要时隐 ...

  4. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  6. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  7. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  8. CSS对浏览器的兼容性(IE和Firefox)技巧整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

随机推荐

  1. 【Redis】跳跃表原理分析与基本代码实现(java)

    最近开始看Redis设计原理,碰到一个从未遇见的数据结构:跳跃表(skiplist).于是花时间学习了跳表的原理,并用java对其实现. 主要参考以下两本书: <Redis设计与实现>跳表 ...

  2. Bootstrap Table 3 官方文档

    备查 Bootstrap Table 3 官方文档 示例

  3. Qt和JS的交互

    参考文章:https://www.cnblogs.com/lgxZJ/archive/2017/12/31/8158132.html Qt和JavaScript的交互 Qt提供了对JS的良好支持,有两 ...

  4. 自定Tinymce中的图片上传

    在引入组件上添加 上传图片的url地址 <tinymce :height="300" ref="tinymce" //上传图片的url地址 upload- ...

  5. 【Hadoop离线基础总结】oozie调度hive

    目录 1.拷贝hive的案例模板 2.编辑hive模板 3.上传工作文件到hdfs 4.执行oozie的调度 5.查看调度结果 1.拷贝hive的案例模板 cd /export/servers/ooz ...

  6. 【Hadoop离线基础总结】MapReduce案例之自定义groupingComparator

    MapReduce案例之自定义groupingComparator 求取Top 1的数据 需求 求出每一个订单中成交金额最大的一笔交易 订单id 商品id 成交金额 Order_0000005 Pdt ...

  7. pyltp安装教程及简单使用

    1.pyltp简介 pyltp 是哈工大自然语言工作组推出的一款基于Python 封装的自然语言处理工具(轮子),提供了分词,词性标注,命名实体识别,依存句法分析,语义角色标注的功能. 2.pyltp ...

  8. [hdu5218]DP-约瑟夫环变形

    题意:n个人围成一圈,另外一个人最开始站在第一个人前面,每次从集合s里面随机选一个数x,这个人顺时针经过x个人后停下来,当前位置的前一个人出队,然后继续进行,求最后剩下的那个人的可能编号. 思路:由于 ...

  9. 豹子安全-注入工具-显错注入-asp_POST_显错_SQLServer_GetWebShell

    豹子安全-注入工具-显错注入-SQL Server-上传WebShell 请看下列视频 . 该视频在停留10秒钟后开始. 或点击此处查看:豹子安全-注入工具-asp_POST_显错_SQLServer ...

  10. Python --元组与列表的差异

    · Python中的元组与列表类似,不同之处是元组的元素不能修改 · 元组使用小括号,不使用括号也可以,列表使用方括号 for example: