水平滚动条和垂直滚动条设置

最新推荐文章于 2024-03-17 22:14:49 发布
最新推荐文章于 2024-03-17 22:14:49 发布
阅读量2.5w 收藏 6
点赞数 1
文章标签： scroll 浏览器 class

1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）   
  overflow-x水平方向内容溢出时的设置   
  overflow-y垂直方向内容溢出时的设置   
  以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。   
    
  2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）   
  scrollbar-arrow-color上下按钮上三角箭头的颜色   
  scrollbar-base-color滚动条的基本颜色   
  scrollbar-dark-shadow-color立体滚动条强阴影的颜色   
  scrollbar-face-color立体滚动条凸出部分的颜色   
  scrollbar-highlight-color滚动条空白部分的颜色   
  scrollbar-shadow-color立体滚动条阴影的颜色   
    
  我们通过几个实例来讲解上述的样式属性：   
  1.让浏览器窗口永远都不出现滚动条   
  没有水平滚动条   
  <body   style="overflow-x:hidden">   
  没有垂直滚动条   
  <body   style="overflow-y:hidden">   
  没有滚动条   
  <body   style="overflow-x:hidden;overflow-y:hidden">或<body     
  style="overflow:hidden">   
    
  2.设定多行文本框的滚动条   
    
  没有水平滚动条   
  <textarea   style="overflow-x:hidden"></textarea>   
    
  没有垂直滚动条   
  <textarea   style="overflow-y:hidden"></textarea>   
    
  没有滚动条   
  <textarea   style="overflow-x:hidden;overflow-y:hidden"></textarea>   
  或<textarea   style="overflow:hidden"></textarea>   
    
  3.设定窗口滚动条的颜色   
  设置窗口滚动条的颜色为红色<body   style="scrollbar-base-color:red">   
  scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。   
  加上一点特别的效果：   
  <body   style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">   
    
  4.在样式表文件中定义好一个类，调用样式表。   
  <style>   
  .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}   
  </style>   
  这样调用：   
  <textarea   class="coolscrollbar"></textarea>

xiangjun_28
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
document.body.scrollTop用法
12-16
document.body.scrollTop用法
<body scroll="no">
05-24 4412
这句话用来去除滚动条，解决了右边无论width无论怎么设置都有空列的问题
自定义BODY滚动条
zhangjian01361的专栏
05-23 6796
1)body,   div     {         SCROLLBAR-HIGHLIGHT-COLOR:   #FFFFFF;   /*滚动条及箭头的亮边色*/         SCROLLBAR-SHADOW-COLOR:   #E1E1E1;         /*滚动条及箭头的暗边色*/         SCROLLBAR-3DLIGHT-COLOR:   #E1E1E1;      
JS垂直以及横向滚动条精确定位居中某一元素
2401_83621384的博客
03-17 447
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
浏览器纵向滚动条导致横向滚动条的出现及多出一段宽度
earthOLtainanwan的博客
09-25 3822
浏览器元素高度超出视口高度时，出现横向滚动条，并在宽度上多出一段距离 原因是： 出现的纵向滚动条也会占据浏览器视口的宽度，多出的那一段宽度就是纵向滚动条的宽度 例如下图 我这里导致的原因：CSS初始化文件中写死了宽度，导致当出现纵向滚动条时，原来在纵向滚动条出现的位置的像素被遮盖 ...
html 纵向滚动条,html – 浏览器垂直滚动条的高度限制
weixin_42200829的博客
05-30 915
从技术上讲,只要任何一个元素不超过最大高度,这是可能的.但是出于实际目的,这是不可能的,因为一旦整体身高超过极限,浏览器行为会变得怪异.这实际上似乎在IE11中正常工作：div{background: red;color: white;height: 10737418px;}.blue {background: blue;color: white;}TestTestTestTest所有四个div都...
document.documentElement.scrollLeft 与document.body.scrollTop区别
笨鸟快飞的专栏
06-07 5930
问题描述 针对获取页面的垂直滚动条的位置，IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置，而混杂模式下则是使用 document.body.scrollLeft。Chrome Safari 在两种文档模式下均使用 document.body.scrollLeft 获取页面的水平滚动条位置。 同理
html body scroll,HTML Scrollbars
weixin_35216188的博客
06-29 349
HTML ScrollbarsThis page contains code for customizing scrollbars. You can use this code on scrollbars of the browser window, as well as scrollbars on HTML elements such as and elements with the ove...
禁用body滚动条的兼容写法
weixin_44283589的博客
04-27 281
注意，这种方法只是禁用了 body 元素的滚动条，而不是禁用整个页面的滚动条。如果需要禁用整个页面的滚动条，可以将上述代码中的 document.body 改为 document.documentElement。在禁用滚动条时，将 position 属性设置为 fixed，并且将 scrollTop 设置为 0，就可以禁用滚动条。在启用滚动条时，将 position 属性和 top 属性设置回原来的值就可以了。
overflow产生的滚动条样式设置
热门推荐
shy256的博客
12-17 1万+
修改overflow产生的滚动条样式，主要可以通过如下三个伪元素设置： 1)-webkit-scrollbar：设置水平滚动条的高度，垂直滚动的宽度 2)-webkit-scrollbar-thumb：设置滚动条里面的滑块样式 3)-webkit-scrollbar-track：设置滚动条的轨道背景样式 4)本文默认使用chrome浏览器查看运行效果 方法/步骤 新建一个html文件叫做CssOverFlow.html(有html编辑工具的，就使用工具创建。没有工具的，可以先创建文本文件，再修改
【原创】关于 body元素滚动条在各浏览器下显示一直性的问题
无止境学的博客
12-02 486
html 元素的滚动条问题 当元素 overflow 保存默认值时，ie6在html内侧出现滚动条，ie7在html外侧出现滚动条，ie8+没有滚动条，Firefox和Chrome也没有滚动条。 当 body默认值时 overflow: visible; 在内容没有溢出窗口的情况下，ie6+和 firefox及Chrome 是没有滚动条的。 但在内容溢出的情况下，ie6的html元素的滚动条会出现...
Android实现Activity水平和垂直滚动条的方法
09-02
主要介绍了Android实现Activity水平和垂直滚动条的方法,涉及Activity的ScrollView设置相关技巧,需要的朋友可以参考下
visual c++自定义滚动条外观 制作五颜六色的滚动条(水平滚动条,垂直滚动条).zip
01-28
vc自定义滚动条外观 制作五颜六色的滚动条(水平滚动条,垂直滚动条).zip
如何设置ListView的列宽不出现水平滚动条博客内容的项目例子
03-26
这个控件需要设置列的宽度，当用完100%的宽度来平均分配给列宽时，一加载数据多，就会出现垂直滚动条后，水平滚动条也会同时出现的问题。怎么设置才能让水平滚动条不出现? 所属项目: ...
水平滚动条和垂直滚动条的自绘优化
03-28
自己写的自绘制水平滚动条和垂直滚动条类、调用可轻松实现滚动条的优化、以及坐标显示、非常适合项目
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
Python ScrolledText 同时添加垂直和水平滚动条
05-25
可以使用`tkinter`中的`ScrolledText`类来实现同时添加垂直和水平滚动条。 首先，需要导入`tkinter`和`ScrolledText`模块： ```python import tkinter as tk from tkinter.scrolledtext import ScrolledText ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值