`
cruih
  • 浏览: 78835 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

用css隐藏浏览器的滚动条

    博客分类:
  • css
阅读更多

1、完全隐藏
在<boby>里加入scroll="no",可隐藏滚动条;

<boby scroll="no">

2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;反之,则显示;

<boby scroll="auto">

 3、样式表方法
在<boby>里加入

style="overflow-x:hidden"    //可隐藏水平滚动条
style="overflow-y:hidden"    //可隐藏垂直滚动条

 这种方法在页面头部为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这种兼容模式下是不行的,其它的没试过,最后终于找到了正确的方法:被包含页面里加入

<style>
html { overflow-x:hidden;overflow-y:hidden }
</style>
 有一段解释是这样说的:body{ overflow-x:hidden; }在标准 DTD 下是不可以的。

4、另一种方法

<style type="text/css">
body {
  overflow-x:hidden; /*隐藏水平滚动条*/
  overflow-y:hidden; /*隐藏水平滚动条*/
}
</style>

 此方法在页面头部为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这种兼容模式下也是不行的。

<style type="text/css">
html {
    overflow-x:hidden; /*隐藏水平滚动条*/
    overflow-y:hidden; /*隐藏水平滚动条*/
}
</style>
 定义在html里就好了。
分享到:
评论

相关推荐

    使用CSS隐藏元素滚动条的示例代码

    时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。 Firefox浏览器 对于Firefox,我们可以将滚动条宽度设置为none: scrollbar-width...

    CSS3自定义滚动条样式的示例代码

    滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦。但是,也只能玩玩,因为只针对webkit内核的浏览器啊啊啊啊啊! ...

    tailwind-scrollbar:Tailwind CSS的滚动条插件

    Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...

    vue中使用css预处理器scss解决body隐藏滚动条问题

    主要就是用了css的伪类元素::-webkit-scrollbar和本身盒子的overflow属性来进行控制,但是会出现一个问题,其余属性(例如:-mz- 、 scroll-width)主要是为了适配主流浏览器下均不出现滚动条。设置好就完成了。

    强制显示、隐藏(IE\Mozilla)浏览器的滚动条实现代码

    利用CSS, 你可以有效地在Mozilla Firefox和Internet Explorer中显示或者隐藏垂直及水平滚动条. 强制显示滚动条: 复制代码代码如下: html { overflow: scroll; } 强制隐藏滚动条: 复制代码代码如下: ...

    css兼容性问题总结笔记

    自己遇见的一些常见的css兼容性问题。和css hack 自己总结出来后生产pdf文档带书签的。 CSS兼容性笔记 1 一 css hack 1 1.直接案例 1 2. hack写法列表 1 3.在IE7+浏览器中按照IE7文档模式 1 ...15. 隐藏水平滚动条 7

    JQuery&CSS;&CSS;+DIV实例大全.rar

    41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...

    46种常见的浏览器兼容性问题大汇总

    20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能...

    css入门笔记

    4.auto 自动,溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性:border: 取值: 2、边框倒角 属性:border-radius: 取值: px % 3、边框阴影 属性:box-shadow: 取值: ...

    css网页设计非常有用的解决办法

    隐藏水平滚动条 一. 介绍 这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们. 二. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用. IE6及其更低版本 * ...

    jQuery的可自动隐藏顶部消息提示框代码.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    100多个JQuery效果示例(实例)div+css+javascrpit

    41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...

    overflow-scroller:一个简单的程序包,可让您轻松地为桌面用户实现带有上一个和下一个箭头的水平滚动

    #Overflow Scroller Overflow Scroller是CSS和javascript的简单...溢出滚动条只需要div中的一组简单项目即可上手,使用包含div的css应该具有overflow-scroller的类名 标记 HTML非常简单。 一个div,其中的项目集合理

    友情链接停止滚动scrollLink插件(乱码空白解决)插件for pjblog.rar

    就想着把友情链接做成可以滚动,但我不喜欢用marquee那样不停的滚动。如果一直在那滚动,容易引起视觉疲劳,估计没人会看完你的友情链接。所以我的目的不是为了让链接滚动而滚动,而是让它滚一会停下来休息一会,再...

    让DIV块在页面的某个位置固定的css代码

    很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的: fixed: 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及...

    jQuery-Custom-Selectbox:使用jQuery替换SelectBox。 隐藏选择框,并将其替换为可访问的js版本。 您需要做的就是对其进行样式设置。 还支持单个选项的背景图像

    功能包括: 自定义滚动条-默认情况下启用使用jScrollPane的自定义滚动条。 您也可以使用默认的浏览器,但效果并不理想。 图标支持-如果一个选项具有CSS类,则该类将继承为生成的选择框代码,其跨度为可设置样式的...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

Global site tag (gtag.js) - Google Analytics