css 禁用浏览器滚动条，初始最外层包含容器 wrapper
浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 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的更多相关文章
- CSS 禁止浏览器滚动条的方法(转)
1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条: <boby scroll="no"> 这个我用的时候完全没效果 ...
- [分享]CSS美化浏览器滚动条
今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...
- （转）CSS 禁止浏览器滚动条的方法
1.完全隐藏 在里加入scroll="no",可隐藏滚动条: 这个我用的时候完全没效果,不知道是什么原因!不过好多人说这么用可以,大概是用的位置不一样吧 2.在不需要时隐 ...
- CSS设置浏览器滚动条样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...
- css 改变浏览器滚动条的样式
/*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...
- CSS——改变浏览器滚动条样式
https://www.cnblogs.com/sun-rain/p/5789417.html
- CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）
字体渐变 https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条 https://blog.csdn. ...
- CSS对浏览器的兼容性(IE和Firefox)技巧整理
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
随机推荐
- 如何使用thrift 服务引擎组件
在本文中将介绍如果通过thrift 组件集成到surging 微服务引擎中,然后可以选择dotnetty 或thrift作为服务远程调用RPC,也可以通过其它语言的thrift 调用surging 服 ...
- libevent(五)event
libevent使用struct event来表示一个事件. #define evutil_socket_t int #define ev_uint8_t unsigned char #define ...
- 15分钟从零开始搭建支持10w+用户的生产环境(四)
上一篇文章,介绍了这个架构中,WebServer的选择,以及整个架构中扩展时的思路. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(三) 五.架构实践 前边用了三篇文章,详细介绍了这个 ...
- C语言设计实验报告（二）
C程序设计实验报告姓 名:赖瑾 实验地点:家 实验时间:2020年3月9日 实验项目:2.3.3 字符与ASCLL码 2.3.4 运算符与表达式的运用 2.3.5 顺序结构应用程序 3.3.1 数学函 ...
- 为什么要学习微信小程序直播开发？最新的小程序直播介绍和优势分析！
小程序直播的介绍 “小程序直播”是微信提供给开发者的实时视频直播工具,包括直播管理端.主播端和观众端等模块,支持提供常用的用户互动和营销促销工具. 开发者只需在小程序中引入相关代码并在管理后台完成配置 ...
- Spring Boot在Controllder中常用注解
1.@RestController @RestController 相当于@Controller+@ResponseBody 注解如果使用@RestController 注解Controller 中的 ...
- JAVA设计模式之工厂系列（factory）
任何可以产生对象的方法或者类,都可以称之为工厂.单例就是所谓的静态工厂. 为什么jdk中有了new,还需要工厂呢? a.灵活的控制生产过程 b.给对象加修饰.或者给对象加访问权限,或者能够在对象生产过 ...
- Spring Cloud学习 之 Spring Cloud Hystrix（基础知识铺垫）
Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 文章目录 前述: 快速入门: 命令模式: RxJava: 前述: 在微服务架构中, ...
- 【Spark】不熟悉Spark-shell常用参数？这一张图就够了
- 常用中文分词工具分词&词性标注简单应用（jieba、pyhanlp、pkuseg、foolnltk、thulac、snownlp、nlpir）
1.jieba分词&词性标注 import jieba import jieba.posseg as posseg txt1 =''' 文本一: 人民网华盛顿3月28日电(记者郑琪)据美国约翰 ...