html自定义滚动条不占位,如何实现滚动条在各浏览器中不占用布局

在一般浏览器中,当内容超出容器时,如果不是overflow:hidden,通常都会出现滚动条,由于滚动条并不是浮在布局内容之上,所以通常会带来两个问题:

1,容器内部内容宽度固定,恰好撑满,此时出现滚动条会把内容挤到下一行(如图1.gif);

.container{

width:300px;

height:200px;

background-color:#efefef;

overflow-y:hidden;

overflow-x:hidden;

padding:10px;

}

.container:hover{

overflow-y:auto;

}

.container div{

display:inline-block;

margin-right:5px;

width:92px;

height:300px;

background-color:#777;

}

dda30aca4d1a

1.gif

2,容器内容百分比计算,自适应宽度,鼠标经过出现滚动条,鼠标离开滚动条消失,会出现中间内容晃动(如图2.gif)

注:相对于上面的变化部分,仅是将内部div宽度设为百分比自适应

.container div{

width:calc(100% - 6px);

}

dda30aca4d1a

2.gif

那么我们如何来解决这两个问题呢?

我门可以在DOM布局中做些修改,在container内部再添加一层class="inner-container"的容器,并让其宽度=width(container)+width(scroller),如此便不会在出现滚动条的时候将内容挤下去了,代码如下

.container{

width:300px;

height:200px;

background-color:#efefef;

overflow-y:hidden;

overflow-x:hidden;

white-wrap:nowrap;

padding:10px;

}

.container:hover{

overflow-y:auto;

}

.container div div{

display:inline-block;

margin-right:5px;

width:92px;

height:300px;

background-color:#777;

}

/*添加部分:一般ie中的滚动条宽度是24px*/

.inner-container{

width:calc(100% + 24px);

}

原理即是,让包裹子元素内部容器inner-container比外部容器container 的宽度大于一个滚动条宽度,这样即使滚动条出现也不会影响子元素。

一般来说windows下IE的滚动条宽度为24px,所以加上24px即可,如果是在谷歌中既可以设置滚动条宽度,或者设置overflow:overlay 也可(不过这个属性在IE中不兼容)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411772.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装教程-VMware 12 安装 Windows 10 企业版

VMware 12 安装 Windows 10 企业版 1、实验描述 在虚拟机中,手动安装 Windows10 企业版操作系统,为一些实验提供平台,因此,有关系统激活问题不再演示。可自行百度,或者加入QQ群交流:647033350 2、实验环境 …

python 比赛成绩预测_大数据新研究:用六个月的跑步记录准确预测马拉松完赛成绩...

随着疫情得到控制,各个城市的马拉松比赛又开始相继恢复。从线上马拉松终于可以再次到各个城市不同的赛道上奔跑,无疑是跑者的福音。积压了大半年的情绪,也激发了跑者更高的训练热情,带来了更多跑量的累积。而准备一场马拉松比赛&a…

求最大素数和最小素数

#include "math.h"#include "stdio.h"/**//* ′ yo D y&#xffe1; kissrat′ 2 μ aD′ a*/voidmain(){ long m,m1,i,k; for(m100000002;m<100001000;m6){ m1m-1; ksqrt(m1); for (i3;i<k;i2)if(m1%i0) br…

fla 走迷宫游戏 源码_迷宫新玩法,果断一试

迷宫&#xff0c;真的是谜一样的存在&#xff0c;大到几十岁的成年人&#xff0c;小到三岁小儿&#xff0c;都对其没有抵抗力。而迷宫君也是真给力&#xff0c;除了能给人带来愉悦感与成就感&#xff0c;还能同时锻炼专注力、空间感、思维力、视觉追踪等&#xff0c;是儿童感统…

用OmniPeek快速定义的过滤器来抓网页提交信息

编写网络程序的人&#xff0c;经常要抓取HTTP操作过程的一些数据&#xff0c;常用的软件有HTTPSniffer、httpLook等软件&#xff0c;这些软件比常简单&#xff0c;这儿就不作介绍了。这里重点介绍一下用OmniPeek来抓取数据包。OmniPeek 是一款非常优秀的网管软件&#xff0c;功…

c++ dll发消息到主窗口_PyQt5学习笔记(五)窗口图形绘制

PyQt5提供了绘制图形的API&#xff0c;支持绘制&#xff1a;文本各种图形&#xff08;直线&#xff0c;点&#xff0c;椭圆&#xff0c;弧&#xff0c;扇形&#xff0c;多边形等&#xff09;图像绘制图形需要一个类QPainter。基本的绘制过程&#xff1a;# 创建QPainter对象 pai…

[转] SQL Server中的行列转换问题

原表结构序号性别部门工资1男部门a8002女部门b9003男部门a4004女部门d 14005男部门e12006男部门f5007女部门a 3008男部门d10009女部门d123010女部门b200011男部门c200012男部门b1200最终显示 部门名 人数 男 女 小于800元 从800至999 从1000元至1190元 大于12…

vue-cli@2的原理解析

作为一个菜鸟&#xff0c;我有一颗好奇的心&#xff0c;每当vue init 的时候&#xff0c;看到那流畅的进度和神奇的结果&#xff0c;心里都充满一窥其本质的期望…… 以下就是我不断的console&#xff0c;大致理出来的一个流程心得&#xff0c;纪录在此&#xff0c;以作备忘。 …

怎么用计算机直接截图,电脑截图快捷键怎么使用,电脑怎么快捷键截图

我们对电脑快捷键都不陌生&#xff0c;有快捷键的帮助&#xff0c;我们可以加快电脑操作速度。那不知道大家对电脑截图快捷键有了解吗&#xff1f;下面小编就跟大家分享下电脑截图快捷键的几种使用方法。1. 首先使用电脑自带的截图。我们只需要使用快捷键【PrtScn】即可。在需要…

c语言数组指定位置插入和删除_Apache POI在指定位置插入表格

接到的需求是在模板表格的指定位置再插入表格。比如在模板的${proTable}处插入表格。依赖的包org.apache.poi poi 3.15org.apache.poi poi-ooxml 3.15插入表格由于是在表格里的指定地方插入表格&#xff0c;所以要遍历表格的每个单元格&#xff0c;查找到要插入点的占位符。// …

学习URLRewriter.dll的使用

1.添加引用 2.配置webconfig webconfig1<?xml version"1.0" encoding"utf-8"?> 2<configuration> 3 4 <configSections> 5 <section name"RewriterConfig" type"URLRewriter.Config.RewriterConfigSerializer…

高斯消元

高斯消元 高斯消元可真是复杂啊。。。。。 高斯消元求解n元一次线性方程组的板子题&#xff1a; P3389 【模板】高斯消元法 举个栗子&#xff1a; 2x y - z 8 -3x - y 2z -11-2x y 2z -3先将它存到矩阵中&#xff1a;②①* (2/3) ③① 接着对①变…

原子微型结构信息应用到局部图形信息存储的猜想

昨天想着看一些图形学方面的知识&#xff0c;在CSDN上看到说Gabor函数可以精确是被图形细微处。于是从网上找了下面这么一篇文章看看&#xff1a; 二、Gabor函数 Gabor变换属于加窗傅立叶变换&#xff0c;Gabor函数可以在频域不同尺度、不同方向上提取相关的特征。另外Gabor函数…

西北大学计算机科学排名,西北大学计算机科学与信息系统Computer Science and Information Systems世界排名2020年最新排名第151-200位(QS世界排名)...

2020年QS计算机科学与信息系统Computer Science and Information Systems专业世界排名公布&#xff0c;西北大学计算机科学与信息系统世界排名第151-200位&#xff0c;西北大学计算机科学与信息系统专业实力怎么样呢&#xff1f;下面美英港新留学介绍西北大学计算机科学与信息系…

Hadoop 集群的三种方式

1,Local(Standalone) Mode 单机模式 $ mkdir input$ cp etc/hadoop/*.xml input$ bin/hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-examples-2.9.2.jar grep input output dfs[a-z.]$ cat output/* 解析$ bin/hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-ex…

三阶矩阵的lu分解详细步骤_快速入门矩阵运算——开源库Eigen

矩阵是数学中一个重要的工具&#xff0c;广泛应用于各种场景下的数值分析&#xff0c;例如&#xff0c;数字信号处理&#xff0c;图像处理等。我们如何在程序中使用矩阵进行运算呢&#xff1f;本文将为大家介绍一个开源的矩阵运算工具——Eigen。Eigen is a C template library…

birt报表表格边框_Python 快速设置 Excel 表格边框

1. 安装 xlwings直接安装用 pip install xlwings2. 导入 xlwingsimport xlwings as xw3. 打开 Excel 文件# 打开存好的 Excelapp xw.App() # 设置应用wb xw.Book(data/小蜜蜂超市销售报表.xlsx) # 打开文件ws wb.sheets[Sheet1] # 选择表格4. 获取表格行列last_column ws.…

矢量合成和分解的法则_力的合成与分解

1力的合成一、合力与分力当一个物体受到几个力的共同作用时&#xff0c;我们常常可以求出这样一个力&#xff0c;这个力产生的效果跟原来几个力的共同效果相同&#xff0c;这个力就叫做那几个力的合力&#xff0c;原来的几个力叫做分力&#xff0e;二、合力与分力的关系1.合力与…

[导入]相片: 53787515.jpg

文章来源:http://img.blog.163.com/photo/5VZ9bIclg8NWuT90ExHHmQ/1697575584542151534.jpg转载于:https://www.cnblogs.com/baiyirui/archive/2008/04/27/1173122.html

超导量子计算机速度多快,我国量子计算机实现量子霸权,计算速度比谷歌快了100亿倍...

12月4日&#xff0c;中国科学技术大学宣布&#xff0c;我国新构建的76个光子的量子计算机实现了量子霸权。在5000万个样本的高斯玻色取样实验中&#xff0c;“九章”量子计算机仅用了200秒就完成了&#xff0c;如果使用世界第三的超级计算机进行实验&#xff0c;它也要将近20亿…