浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 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系列之4----redis高级应用（集群搭建、集群分区原理、集群操作）

    文章主目录 Redis集群简介 Redis集群搭建 Redis集群分区原理 集群操作 参考文档 本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 ...

  2. Shell脚本(二)数学运算

    直接上代码. #!/bin/bash no1= no2= echo "using let ..." let result=no1+no2 echo "result is: ...

  3. 为什么要学习微信小程序直播开发？最新的小程序直播介绍和优势分析！

    小程序直播的介绍 “小程序直播”是微信提供给开发者的实时视频直播工具,包括直播管理端.主播端和观众端等模块,支持提供常用的用户互动和营销促销工具. 开发者只需在小程序中引入相关代码并在管理后台完成配置 ...

  4. 低价购买(LIS方案统计)

    题意:https://www.luogu.com.cn/problem/P1108 如果两个数列组成的数字完全相同,那我们说这两个数列相同. 求出最长下降子序列的方案数. 题解来自 wjyyy大神. ...

  5. Mysql数据库多表联查

    内连接:查询的是多个表的交集 外连接:查询的是一张表的全部数据和另一张表满足要求的数据 student数据库表 grade数据库表 内连接: 隐式内连接 SELECT s.id, s. NAME, s ...

  6. kafka学习 之 Quickstart

    第一步:安装启动kafka 官网链接:https://www.apache.org/dyn/closer.cgi?path=/kafka/2.3.0/kafka_2.11-2.3.0.tgz 进入指定 ...

  7. js函数传递参数的方式------传值与传递指针

    原则: 1. 基本类型:传值 2. 对象:传递指针 应用场景之一: 用jq选择器获取某个div后(例如:element),准备进行某些修改,之后添加到页面中去. 采取例一的方式,append后发现修改 ...

  8. JPA与hibernate-------JPA

    ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...

  9. mongodb cluster

    假设三台机器,ip分别为192.168.1.10,192.168.1.11,192.168.1.12,分别在每台电脑上下载并解压mongodb,关闭防火墙或者开放防火墙端口 一.安装shard 配置文 ...

  10. MOS管、PCB、H桥、步进电机驱动电路、51单片机的IO口驱动能力、灌电流、拉电流、上拉电阻的选择

    嵌入式开发PCB设计几点体会(转载):http://bbs.ednchina.com/BLOG_ARTICLE_3021801.HTMCollector-Emitter Saturation Volt ...