0

0

关于HTML中的滚动条/去掉滚动条

巴扎黑

巴扎黑

发布时间:2017-04-01 14:27:17

|

2137人浏览过

|

来源于php中文网

原创

1.xhtml下滚动条的颜色问题

在原来的html的时候,我们可以这样定义整个页面的滚动条:

body{

scrollbar-3dlight-color:#d4d0c8; /*- 最外左 -*/

 scrollbar-highlight-color:#fff; /*- 左二 -*/

 scrollbar-face-color:#e4e4e4; /*- 面子 -*/

 scrollbar-arrow-color:#666; /*- 箭头 -*/

 scrollbar-shadow-color:#808080; /*- 右二 -*/

 scrollbar-darkshadow-color:#d7dce0; /*- 右一 -*/

 scrollbar-base-color:#d7dce0; /*- 基色 -*/

 scrollbar-track-color:#;/*- 滑道 -*/

}

但是同样的代码,我们应用在 xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题。

那么怎么才能在xhtml下应用滚动条样式呢?看下列代码:

html{

scrollbar-3dlight-color:#d4d0c8; /*- 最外左 -*/

 scrollbar-highlight-color:#fff; /*- 左二 -*/

 scrollbar-face-color:#e4e4e4; /*- 面子 -*/

 scrollbar-arrow-color:#666; /*- 箭头 -*/

 scrollbar-shadow-color:#808080; /*- 右二 -*/

 scrollbar-darkshadow-color:#d7dce0; /*- 右一 -*/

 scrollbar-base-color:#d7dce0; /*- 基色 -*/

 scrollbar-track-color:#;/*- 滑道 -*/

}

这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的“body”修改成“html”测试一下,发现依然可以实现效果。那到底是为什么呢?

我们来看一下下面的图:

关于HTML中的滚动条/去掉滚动条

这就是html最基本的dom树结构。

我们再看看html和xhtml的定义:



html (hyper text markup language,超文件标记语言),超文件标记语言广泛应用于国际互联网上.html描述了文本基准如何进行呈现,以及超级连接如何连接到另外的页面。

xhtml (extensible hypertext markup language,可扩展的超文件标记语言),是一种标记语言,表现方式与 html类似, 不过语法上更加严格。从继承关系上讲,html是一种基于sgml的应用,非常灵活,而xhtml则基于xml,xml是sgml的一个子集。xhtml 1.0 在2000年1月26日成为 w3c 的推荐标准。

从字面上来看,xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面?其实最根本的原因就是要让html更加结构化标准化(因为html实在是太烂)。

ok,我们回来看上面的结构树,我们在html里面定义的是body,因为html不是很标准所以这样可以生效,而在xhtml里面这样就不行了,我看看那个图很明显,body标签本身不是根元素,只有html才是根元素,而页面的滚动条也是属于根元素的,所以这就是我们为什么定义body没有效果的原因,因为我们定义的只是一个子原素。ok,我们知道了原理,来做一个试验如果把定义“body”或“xhtml”换成“*”:

*{

scrollbar-3dlight-color:#d4d0c8; /*- 最外左 -*/

 scrollbar-highlight-color:#fff; /*- 左二 -*/

 scrollbar-face-color:#e4e4e4; /*- 面子 -*/

 scrollbar-arrow-color:#666; /*- 箭头 -*/

 scrollbar-shadow-color:#808080; /*- 右二 -*/

 scrollbar-darkshadow-color:#d7dce0; /*- 右一 -*/

 scrollbar-base-color:#d7dce0; /*- 基色 -*/

 scrollbar-track-color:#;/*- 滑道 -*/

}

在html和xhtml都通过,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

(ps:其实与其说是html与xhtml的区别到不如说是有无xhtml 1.0 transitional doctype的区别,但是如果你把页面的xhtml 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过你要把xhtml 1.0 transitional doctype修改成html 4.01 doctype同样页面定义body也不会有效果的,虽然这个页面的标准是html 4.01)

2、xhtml下frame页面横向滚动条的问题

在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对xhtml 1.0 transitional doctype的解释缺陷。

对于这个bug一般有3种解决方案,

方法1:

代码:

html { overflow-y: scroll; }

原理:强制显示ie的垂直滚动条,而忽略水平滚动条。

优点:完全解决了这个问题, 允许你保持完整的xhtml doctype 。

缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。

方法2:

代码:

html { overflow-x: hidden; overflow-y: auto; }

原理:隐藏横向滚动,垂直滚动根据内容自适应。

优点:在视觉上解决了这个问题。在不必要的时候,未强制垂直滚动条出现。

缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,屏幕以外的内容会因为用户无法水平滚动,而看不到。

方法3:

代码:

body { margin-right: -15px; margin-bottom: -15px; }

原理:这会在margin的水平和垂直方向上添加一个负值,ie添加了该精确数值后,便会去除对滚动条的需求假象。

优点:在视觉上解决了这个问题,垂直滚动根据内容自适应。

缺点:由于“人为创建”了15px的外边距(margin),所以无法使用该填充过的屏幕区域。

360智图
360智图

AI驱动的图片版权查询平台

下载


去掉水平滚动条:



去掉竖直滚动条:



隐藏横向滚动条,显示纵向滚动条:



全部隐藏



或者是



这里先说一下滚动条的属性代码:

overflow-y : visible | auto | hidden | scroll

visible :  不剪切内容也不添加滚动条。

auto :  在需要时剪切内容并添加滚动条

hidden :  不显示超过对象高度的内容,这里不对这个属性作介绍,大家喜欢的话可以自己尝试

scroll :  总是显示纵向滚动条

首先我现说一下去掉滚动条的方法:

如果用百度风格模版的话,滚动条只可能有一个,那就是整个空间右边最大的浏览器窗口滚动条,也就是我美化过的那个滚动条,现在告诉大家,我们可以把这个滚动条去掉,但是却不影响浏览的方法:

在body

{}中加入overflow-y :

visible就可以了,这样滚动条就不会显示出来了。大家可能会问,这样怎么往下拉?呵呵,既然我说了不影响浏览,那当然是有方法的,浏览的方法就是用

鼠标的滚轮,虽然滚动条没了,可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次

数多吧?提示下,如果碰到没有滚动条而鼠标又没有滚轮的朋友,该怎么浏览网页呢?呵呵,大家可以用键盘上面的方向键上方的pageup和pagedown

来上下翻页,也可以用空格往下拉网页和shift+空格往上拉网页,还有一个方法就是用上下方向键来拉动,另外还有按home键回到网页顶部,end键到

达网页底部,呵呵,是不是方法很多呢?不过这样总会有那么一些些的不方便,所以大家可以根据自己的空间和喜好来考虑要不要取消这个滚动条。

哈哈,想不到啰哩叭嗦地,一下说了这么多话

下面我们说添加滚动条的方法:

overflow-y : auto;height:多少px

auto

就是自动判断要不要加入滚动条,当设定的对象内容超过了height设定的高度时,就自动添加滚动条,不然则不显示,body{}中的默认值就是

overflow-y : auto;height:浏览器高度,所以当网页内容超过浏览器高度的时候,浏览器右边就会自动显现出滚动条来

大家如

果需要设置这个的话,本人建议设置在最新评论#m_comment{}、文章列表#m_blog{}等内容和高度都不固定的模版中,有的朋友找不到这些模

版的id,可能只有例如#m_comment p.item{}或者#m_pro a{}等的id,那么可以自己加上没有的id,这样就可以设置了

这里还有另一个添加滚动条的方法:

overflow-y :scroll

这个参数的作用上面解释过了,不过如果只加这个参数的话,虽然滚动栏会显示,但是不会显示滚动条,所以必须还要加上一个

height:多少px

高度属性,跟上面的那个方法差不多,但是有根本的区别,这个无论对象内容的高度是否超过了height设定的高度,滚动栏永远都会显示在边上的

下面我们说一下关于滚动条的美化,这个我朋友给我看了网上的一个说明,我觉得上面的图很不错,但是很小,所以我放大了一倍,看起来就清楚多了,我们先说一下美化的各个属性:

scrollbar-face-color: 颜色代码;

scrollbar-highlight-color:颜色代码;

scrollbar-shadow-color: 颜色代码;

scrollbar-3dlight-color: 颜色代码;

scrollbar-arrow-color: 颜色代码;

scrollbar-track-color: 颜色代码;

scrollbar-darkshadow-color: 颜色代码;

大家是不是看到这么多属性有点点头大了?哈哈,放心,看一下我刚才提及的被我放大了一倍的图解你们就会感觉好多了:



里的图片上还有一个scrollbar-base-color的属性,其实这个属性是个上面7个属性的总合,怎么说呢?就是当你设定了这个属性的颜色后,

前面的7个属性都可以不用设置了,滚动条会自动帮你设定的,只是这个设定都会基于你设定的scrollbar-base-color的颜色而自动设定

这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色,但是缺点就是不能够融和五颜六色于一体。。

注:设定了scrollbar-base-color就不要设定其他七个属性了,设定了其他七个属性就不要设定scrollbar-base-color,不然之间可能会有冲突,会有一些效果不起作用的

最后,还是考虑到大家可能会喜欢我的美化代码[真臭美~],我把我的美化代码贴出来:

scrollbar-face-color: #ccffff;

scrollbar-highlight-color: white;

scrollbar-shadow-color: #813533;

scrollbar-3dlight-color: #813533;

scrollbar-arrow-color: #813533;

scrollbar-track-color: white;

scrollbar-darkshadow-color: #813533;

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

2

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

1

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

5

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

513

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

182

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

309

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

10

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

13

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

10

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 24.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号