html关于强制显示、隐藏浏览器的滚动条

刚在做个网站,有个页面与其他页面显示有点出入,

通过观察和调试,发现是该页面的垂直高度未溢出,

无法调用出垂直滚动条,

从而导致相对于其他页面居中时相差几个像素距离,

使得页面效果不够友好。

解决方案:将所有页面强制添加或者隐藏浏览器的滚动条即可。

相关css 代码如下:

//强制显示滚动条:

html { overflow: scroll; }

//强制隐藏滚动条:

html { overflow: hidden; }

//隐藏IE的水平滚动条:

html { overflow-x: hidden; }

//隐藏IE的垂直滚动条:

html { overflow-y: hidden; }

//强制显示IE的水平滚动条:

html { overflow-x: scroll; }

//强制显示IE的垂直滚动条:

html { overflow-y: scroll; }

//强制显示Mozilla的水平滚动条:

html { overflow:-moz-scrollbars-horizontal; }

//注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.

//强制显示Mozilla的垂直滚动条:

html { overflow:-moz-scrollbars-vertical; }

//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.

时间: 2024-10-16 11:00:53

html关于强制显示、隐藏浏览器的滚动条的相关文章

html关于强制显示 隐藏浏览器的滚动条

浏览器的滚动条在一些特殊的展示中,是不需要的,所以必须把它隐藏掉,文章主要介绍一些隐藏或者显示IE的水平或者垂直滚动条的实现代码,需要了解的朋友可以参考下: 相关css代码如下: //强制显示滚动条: html { overflow: scroll; } //强制隐藏滚动条: html { overflow: hidden; } //隐藏IE的水平滚动条: html { overflow-x: hidden; } //隐藏IE的垂直滚动条: html { overflow-y: hidden;

如何隐藏scroll-Y纵向滚动条,并不影响内容滚动的方法

网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说.本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内容. 纯DIV+CSS方法 在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了.该方法兼容所有浏览器. <div class="outer-container"> <div class="container&q

FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)

即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字体模式(一般适用于移动端显示,iOS,Android): 大间距模式(FineUIMvc v1.3.0新增显示模式): 可见,大间距模式和大字体模式类似,但是文字大小还是默认的 13px,而不是大字体模式的 16px. 这个新增的模式对那些显示内容不多的客户非常受用,当然也适合于密集恐惧症患者~_~

用css对webkit内核的浏览器自定义滚动条

用css设置webkit内核浏览器的滚动条主要设置以下7个属性: 1.::-webkit-scrollbar /*滚动条整体部分,可以设置宽度高度*/ 2.::-webkit-scrollbar-button /*滚动条两端的按钮*/ 3.::-webkit-scrollbar-track  /*外层轨道*/ 4.::-webkit-scrollbar-track-piece  /*内层滚动槽*/ 5.::-webkit-scrollbar-thumb /*滚动的滑块*/ 6.::-webkit

一行代码隐藏所有浏览器的滚动条

html { overflow: hidden; } 注意,是在html上加,而不是body,在body上加在IE中是不起作用的 原文地址:https://www.cnblogs.com/hros/p/10936395.html

JS弹出层遮罩,隐藏背景页面滚动条细节优化

做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度

隐藏浏览器中php,apache,varnish,nginx版本信息

一般浏览器会显示服务器执行脚本或服务器版本相关信息,比如: 虽然这个方便调试查看,但暴露了太多的服务器相关信息.实际应用最好关闭这些信息.防止别有用心的人搞破坏. php 隐藏方法: 文档地址:http://php.net/manual/zh/ini.core.php#ini.expose-php 修改 php.ini expose_php On 改成 expose_php Off 重启服务器即可.如果没有效果,则需要核对下修改的php.ini是否为当前PHP加载的配置文件. varnish 隐

jquery中的scrollTop控制浏览器的滚动条

jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 :$(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop(); 获取滚动条到左边的垂直宽度 : $(document).scrollLeft(); 计算元素

让浏览器的滚动条消失但是还能滚动

第一种方式: 在css样式中添加这个,意思是让浏览器的所有滚动条消失 第二种方法: IE中去除: 原文地址:https://www.cnblogs.com/acmyun/p/9360015.html