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;

}

1.gif

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

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

.container div{

width:calc(100% - 6px);

}

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中不兼容)

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

HTML自定义滚动条（仿网易邮箱滚动条）
自定义滚动条在web前端非常火爆的今天,好的界面可以给人们很好的体验.浏览器的滚动条总是千篇一律,那么滚动条是否可以自定义呢?网上好多自定义滚动条通过CSS样式来设置的,但是这种做法只有IE支持,那 ...
mysql滚动条不见了,11-JS处理滚动条
[TOC] 前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见 ...
滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...
原生js监听滚动条_原生JS实现滚动条监听
本文主要利用原生的javascript实现滚动条事件的监听,主要涉及的知识: (1)利用React组件渲染一个UI页面 (2)实现锚点链接 (3)实现滚动条onscroll事件其中,利用React渲 ...
1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解手动制作滚动条的原理 2. 掌握鼠标悬停在本案例中的用法一.成品效果 Axure ...
解决layui table页面一加载页面有滚动条的话表格也有滚动条
解决layui table页面一加载页面有滚动条的话表格也有滚动条只要在css中加入body{overflow-y: scroll;}就可以解决了
css怎么去掉滚动条滑块,css如何去掉滚动条样式
css去掉滚动条样式的方法是,给滚动条设置[overflow:hidden]样式,将滚动条完全隐藏即可,例如[::-webkit-scrollbar {display: none; /* Chrome ...
h5滚动隐藏滚动条_vue.js-div怎么隐藏滚动条
这次给大家带来vue.js-div怎么隐藏滚动条,vue.js-div隐藏滚动条的注意事项有哪些,下面就是实战案例,一起来看一下. 组件被包在一个高度固定的pmounted () { var bop ...
C语言窗口水平滚动条,C语言Windows程序设计滚动条
滚动条由滚动滑块以及两端的滚动箭头组成, 滚动条的作用是当需要显示的内容超过窗口客户区大小时提供上下/左右的翻页使用户能够完整的阅读显示信息 Windows滚动条介绍滚动条由滚动滑块以及两端的滚动箭 ...

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

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

最新文章

热门文章