CSS定义网页滚动条和去掉滚动条的方法

CSS自定义滚动条 ,因为浏览器的多样性,各个浏览器在滚动条的样式上,也不统一。当一个网页发不出去,我们尽可能的需要保证样式的一致性,美化滚动条可以解决这个统一的问题,当然了,你一个绚丽的页面,肯定不想出现丑了吧唧的滚动条吧!这里使用两个div。子div主要是用来保证父div可以出现滚动条。 阅读详情

(一)滚动条样式主要涉及到如下CSS属性:

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

(二)以下代码定义滚动条的样式:

<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #f892cc; //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; //滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: #fd76c2; //立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: #fd76c2; //滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: #fd76c2; //上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: #fd76c2; //滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: #f629b9; //滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: #e9cfe0; //滚动条的基本颜色
}
</STYLE>

注意:如果你的静态页面顶端有类似与这样的代码<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> ,请将这段代码删除或将BODY {…}更改为HTML{…}即可见滚动条效果。

(三)网页中去掉滚动条:


去掉横向滚动条:<body style=’overflow:scroll;overflow-x:hidden’>
去掉竖向滚动条:<body style=’overflow:scroll;overflow-y:hidden’>
两个都去掉:<body scroll=”no”>
框加中去滚动条在name=”"后面加 scrolling=”No”

(三)完全去除滚动条方法:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script language="javascript"> <!-- function fullscreen(){ window.open("/index.htm","","scrollbars=0,toolbar=0,location=0, 
fullscreen=1,directories=0,status=0,menubar=0,resizable=0"); } // --> </script> </head> <body> <h3 align="center"><a href="j avascript:fullscreen()">打开</a></h3> </body> </html> 
即使scrollbars值为0,在全屏的时候仍然会出现滚动条,后来发现,要完全取消滚动条,还需要在CSS里面加上: overflow:hidden; 
有网友说可以在Body里面加上scroll=no实现:<body scroll=no></body> 
自定义网页滚动条设计与实现 在现代网页设计中,自定义滚动条样式已经成为提升用户体验的重要手段之一。通过CSS3,开发者们可以摆脱传统浏览器滚动条的单调与局限,创建出富有个性且与页面风格一致的滚动条。本章将介绍如何使用CSS3来自定义滚动条的外观,并讨论不同浏览器下的兼容性问题及解决方案。我们将从基础的自定义滚动条样式开始,逐步深入到更复杂的场景和性能优化的考量。通过本章的学习,读者将能够熟练掌握自定义滚动条的设计与实现技巧,为构建更加精致和流畅的用户界面奠定坚实的基础。 阅读详情

相关推荐

基于verilog的16QAM调制

思路1:正交调幅法——实现16QAM调制,可以理解为时相位相差90度的两个正弦波的4PAM叠加。 4比特输入经过2->4进制转化得到两路2比特输入,然后分别经过4PAM后叠加所得输出即为16QAM调制结果。 具体程序稍后编写。 思路2:复合相移法——可以借助前面编写的QPSK,相当于两路幅度不同的QPSK的叠加,比如幅度分别取1和3 。 思路1正交调幅法的设计方案: 两正弦波相位差...

weixin_30725467的博客 2929

CSS使用小操作(隐藏滚动,实现三角行等...)

解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap { display: inline-block; overflow: hidden vertical-align: bottom } 超出部分显示省略号 // 单行文本 .wrap { overflow:hidden;/*超出部分隐藏*/ text-overflow:ell...

weixin_43408330的博客 1158

用Docker-Compose三节点部署生产级Doris集群:从配置文件到故障转移

本文详细介绍了如何使用Docker-Compose部署一个生产级的三节点Apache Doris集群。内容涵盖从核心架构理解、配置文件编写到集群初始化验证的全过程,并重点讲解了如何实现高可用、数据持久化、健康检查以及故障转移等生产级运维关键点,为中小团队提供了一种在容器化便利性与系统稳定性间取得平衡的可靠部署方案。

kkk56的博客 857

css去掉滚动条箭头,浏览器默认滚动条箭头样式的修改

我在修改浏览器默认滚动条样式时,没办法实现在滚动条两边出现单个方向箭头?在默认的方向箭头处打补丁时,滚动条的两端总是会出现两个方向的按钮。一下是代码实例:::-webkit-scrollbar-button {display: block;}::-webkit-scrollbar-button:horizontal:single-button:start {width: 24px;backgrou...

weixin_39917576的博客 2836

LTE信令流程实战:从Attach到Service Request的完整解析(附常见问题排查)

本文深入解析LTE信令流程中的Attach和Service Request关键环节,提供从基础原理到实战排查的完整指南。涵盖鉴权、承载建立等核心步骤,分析常见故障模式及优化方案,并附赠信令跟踪工具使用技巧,助力通信工程师提升网络运维效率。

alpha的博客 319

手把手教你用Simulink给C2000配置SCI串口发送数据(附模型与避坑点)

本文详细介绍了如何使用Simulink为C2000系列微控制器配置SCI串口发送数据,包括硬件资源分配、模型搭建、参数设置及调试技巧。通过代码生成和串口通信实践,帮助开发者高效实现嵌入式系统开发,避免常见通信问题。

weixin_30831529的博客 296

css 常用滚动条

*滚动条的背景区域的圆角*//*滚动条的背景颜色*//*滚动条的背景区域的内阴影*//*滑块 滚动条的内阴影*/

qq_34114535的博客 1680

osgearth2.10 demo功能介绍

osgearth-2.10 demo: 说明: 1、运行环境win7 x64 旗舰版,CPU i5-6400 8核,8G内存; 2、括号内是对应demo的测试参数(.earth); 3、配置OSG_FILE_PATH; 4、参数命令行可以查看各个demo需要的输入参数; 5、前缀说明:gui界面程序、cmd控制台程序、non功能未知; 6、程序后括号里的non表示不需要通过命令行输入参数; 示例: 1、gui:osgearth_3pv(simple.earth):相机与地球的投影关系,Range表示相机

rach09的专栏 2423

css 页面去除滚动条方法

css 页面去除滚动条方法

qq_39111074的博客 1万+

从MATLAB代码入手:手把手教你复现OTFS调制解调核心模块(附完整函数解析)

本文详细解析了OTFS调制解调技术在MATLAB中的实现方法,包括核心模块如ISFFT变换、海森堡变换及MP检测算法的代码实现。通过完整的函数解析和性能验证框架,帮助通信工程师快速掌握这一前沿技术,提升在高速移动场景下的通信系统设计能力。

weixin_42568801的博客 319

【大数据Java基础-Java基础01】环境搭建(一)Sublime Text3搭建Java编译环境(Windows系统)

1. 首先配置好Java环境变量 我的jdk版本是1.8.0_191,存放目录是C:\Program Files\Java,因此添加以下环境变量 (1)系统变量→新建 JAVA_HOME 变量,变量值为: C:\Program Files\Java\jdk1.8.0_191 (2)系统变量→找到 Path 变量→编辑,末尾加入: ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 如果Path变量末尾本身有“;”,则上述路径前面则不需要加“;” (3)系统变量→新建 CL

微信搜:import_bigdata,大数据领域硬核原创作者 556

css基础-- CSS定义网页滚动条和去掉滚动条的方法

一)滚动条样式主要涉及到如下CSS属性:overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条(二)以下代码定义滚动条的样式:&lt;STYLE&gt...

红尘道,红尘练心 660

【CANdelaStudio编辑CDD】-1.2-给$10服务SessionControl创建一个新Session会话并修改Session state machine会话状态机(UDS诊断)

前一篇:【UDS诊断描述文件CDD】-1.1-ISO_14229中$10服务理论部分https://blog.youkuaiyun.com/qfmzhu/article/details/120375515案例背景: 在CDD中如何给$10服务创建一个新的Session会话; 在CDD中如何给$10服务修改Session state machine会话状态机。 目录 1 查看$10服务中已有的Session会话​ 2 查看$10服务中已有的Session state machine会话状态机 3 在$10...

「汽车电子助手」的博客 6077

css定义网页,CSS定义网页滚动条

(一)滚动条样式主要涉及到如下CSS属性:overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条(二)以下代码定义滚动条的样式:BODY {SCROL...

weixin_30941657的博客 397

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

CSS 滚动条: 自定义滚动条样式

CSS 滚动条: 自定义滚动条样式 文章目录CSS 滚动条: 自定义滚动条样式前言正文overflow & ::-webkit-scrollbar实际效果(自定义滚动条、隐藏滚动条)结语其他资源参考连接完整代码示例 前言 本篇来介绍如何为自己的网页定制化自己的滚动条 正文 由于滚动条大部分时候其实是属于浏览器管控的元素,所以我们只能透过一些伪类的方式来影响它的样式。本篇介绍的是专用于 webkit 引擎上生效的写法 overflow & ::-webkit-scrollbar 与滚动条相关的

超悠閒的博客 2358

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

css如何去掉或修改浏览器默认滚动条

去掉浏览器默认滚定条 很简单,只需在出现滚动条的元素加-webkit-scrollbar属性即可,代码如下: /* .box为当前出现滚动条的容器 */ .box::-webkit-scrollbar { display: none } ...

最初都是小白 5628

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

html 纵向滚动条,css设置纵向滚动条

css 怎样设置总是显示竖滚动条给元素设置样式overflow-y:scroll; 和一个高度,当内容填满后就会出现下拉的滚动条了。CSS 如何添加水平滚动条CSS 如何添加水平滚动条 我知道怎么加垂直滚动条设置 overflow 属性: div { width:150px; height:150px; overflow:auto; }overflow属性如下: auto:当此div子元素宽和高大...

weixin_39621488的博客 1万+

网页滚动条CSS样式

滚动条样式主要涉及到如下CSS属性:overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%

科长专栏 7654

html页面 消除横向滚动条,框架网页中去掉横向(水平)滚动条的方法

有的时候,我们可能需要在网页页面中嵌入框架页面,嵌入之后可能会由于框架页面中的页面过宽而会出现横向(水平)滚动条的现象,这样非常不便于浏览者的习惯,我们往往习惯于垂直滚动条,所以在这里向大家介绍一种框架网页中去掉横向(水平)滚动条的方法。框架代码如下:其实从上面的框架代码中就可以了解到,只要htmer.htm文件中的宽度不超过800就不会出现横向滚动条,于是我在htmer.htm中设置宽度为100...

weixin_39572972的博客 3726

CSS隐藏滚动条的方法

方法一: 纯CSS+div样式隐藏。 在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小; 之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll; <style type="text/css"> *{margin:0;padding:0;} .box{ width: ...

csdn_cai_csdn的博客 4万+

怎样设置网页纵向滚动 css,CSS 怎么设置网页下拉条 (滚动条) 样式?

CSS 怎么设置网页下拉条 (滚动条) 样式?很多朋友在网页设计中要自定义下拉条 (滚动条) 样式的情景, 下拉条的样式我们可以通过 CSS 来控制的, 下拉条能不能换颜色或者做的更好看一些呢? 那么滚动条的设置都有哪些呢? 下面本篇文章来介绍一下设置下拉条 (滚动条) 的方法.下拉条 (滚动条) 的设置在 CSS 中不能简简单单就完成, 必竟它是由好多部分组成. 所以我们如果想要设置滚动条就要先...

weixin_31260665的博客 2177

vue项目去掉网页滚动条

去掉网页滚动条

weixin_43550562的博客 1万+

html css 滚动条,网页滚动条CSS样式

网页滚动条CSS样式滚动条样式主要涉及到如下CSS属性:overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条width: 568px; width:...

weixin_31766003的博客 501
上一篇: js openWin详解 滚动条
下一篇: window.parent top.window
落落的天堂
博客等级 码龄15年 470粉丝 85原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值