浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 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. andorid jar/库源码解析

    前言 本篇作为开篇,会大体上说明,需要解读源码的,类库,或者jar. 序 原本,类库和jar的系列准备写到逆向系列课程的,但是那个东西,在写了两篇,就没有后续了,现在也不知道从哪里开始了, 只能等后期 ...

  2. 25-Java-Spring框架(三)

    Spring框架的了解.SpringIOC的部分内容请阅读23-Java-Spring框架(一) SpringwebMVC的了解.请求流程.运用等请阅读24-Java-Spring框架(二) 四.Sp ...

  3. IDEA 2020.1 安装教程

    目录 IDEA 2020.1 安装教程 准备工作 破解教程 IDEA 2020.1 安装教程 IDEA 2020.1 安装教程 Win 10 版 64位操作系统 准备工作 IDEA旗舰版下载地址 je ...

  4. FOC中电流环调试的宝贵经验总结（有理有据+全盘拖出）

    你是否经历过一个人独自摸索前进磕磕碰碰最终体无完肤,然后将胜利的旗帜插到山顶的时刻,如果有,本文也许能帮你在调试FOC电流环的时候给你带来一些帮助和思路. 如果本文帮到了您,请帮忙点个赞

  5. RxJava之并发处理（SerializedSubject）

    在并发情况下,不推荐使用通常的Subject对象,而是推荐使用SerializedSubject,并发时只允许一个线程调用onnext等方法! 官方说明: When you use an ordina ...

  6. mysql5.7 derived_merge=on 影响你的查询了吗?

    衍生表的优化:合并 | 具化 一.mysql优化器对于衍生表的优化处理可以从两方面进行: 将衍生表合并到外部查询 将衍生表具化为内部临时表 1.示例 1: SELECT * FROM (SELECT ...

  7. java -> 异常类与自定义异常

    异常 什么是异常?Java代码在运行时期发生的问题就是异常. 在Java中,把异常信息封装成了一个类.当出现了问题时,就会创建异常类对象并抛出异常相关的信息(如异常出现的位置.原因等). 异常的继承体 ...

  8. Springboot 上传CSV文件并将数据存入数据库

    .xml文件依赖配置 <!--csv依赖 --> <dependency> <groupId>org.apache.commons</groupId> ...

  9. 【前端背景UI】鼠标磁性动态蜘蛛网背景源码

    <div style="float:right;" id="hub_iframe"></div> <script type=&qu ...

  10. git推送代码问题之：ERROR: [abcdefg] missing Change-Id in commit message footer

    一.问题: 在日常的工作中,使用git推送代码时会出现以下报错,“missing Change-Id in commit message” : qinjiaxi:$ git push origin H ...