div滚动条样式(利用div+jquery自定义滚动条样式的2种方法)

2024-06-05 18:25:02 0

div滚动条样式(利用div+jquery自定义滚动条样式的2种方法)

大家好,如果您还对div滚动条样式不太了解,没有关系,今天就由本站为大家分享div滚动条样式的知识,包括利用div+jquery自定义滚动条样式的2种方法的问题都会给大家分析到,还望可以解决大家的问题,下面我们就开始吧!

本文目录

利用div+jquery自定义滚动条样式的2种方法

可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但是大家都知道自带的不好看。接下来就是重点了,如何修改滚动条的样式呢?感兴趣的朋友可以了解下本文 最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面。本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够。那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但是大家都知道自带的不好看。接下来就是重点了,如何修改滚动条的样式呢?经过从网上的不断搜索,发现有两种方法:第一种方法:利用CSS提供的样式,一共是8种属性吧,在这里不做详细介绍,网上很多这方面的资料。第二种方法:自己写一个新的滚动条,即不用div自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现,在网上搜了很多,可以发现基本上只有竖向滚动条,而没有横向滚动条,无奈之下,自己利用jquery写另一个滚动条,当然也借鉴了只有竖向滚动条的程序。说一下具体实现思路:目标div即需要生成滚动条的div,里面嵌套了3个div,分别是用于显示内容的div_content,显示竖向滚动条的div_H,显示横向滚动条的div_W,具体布局就是按照自带滚动条的div的布局一样,然后显示滚动条的div即div_H和div_W有各自包含了3个div,即左右箭头2个,滚动条1个。具体代码如下:复制代码代码如下:if($(_self).children(".jscroll-c").height()==null){//添加内容框(div)$(_self).wrapInner("《divclass=’jscroll-c’style=’top:0px;z-index:9999;zoom:1;position:relative;’》《/div》");//添加竖向滚动条$(_self).append("《divclass=’jscroll-e’unselectable=’on’style=’height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《divclass=’jscroll-u’style=’position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden’》《/div》《divclass=’jscroll-h’unselectable=’on’style=’background:green;position:absolute;left:0;-moz-user-select:none;border:1pxsolid’》《/div》《divclass=’jscroll-d’style=’position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden’》《/div》《/div》");//添加横向滚动条$(_self).append("《divclass=’jscroll-s’unselectable=’on’style=’width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《divclass=’jscroll-l’style=’position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden’》《/div》《divclass=’jscroll-g’unselectable=’on’style=’height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1pxsolid’》《/div》《divclass=’jscroll-r’style=’position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden’》《/div》《/div》");}然后无非就是一些判断,div的内容是否超过了div的范围,监听事件的添加。具体代码可见我的下载资源;

用css怎么设置div滚动条的样式,可改变大小的

div {    scrollbar-arrow-color: #000000; /*三角箭头的颜色*/    scrollbar-face-color: #666666; /*立体滚动条的颜色*/    scrollbar-3dlight-color: #cccccc; /*立体滚动条亮边的颜色*/    scrollbar-highlight-color: #999999; /*滚动条空白部分的颜色*/    scrollbar-shadow-color: #333333; /*立体滚动条阴影的颜色*/    scrollbar-darkshadow-color: #222222; /*立体滚动条强阴影的颜色*/    scrollbar-track-color: #666; /*立体滚动条背景颜色*/    scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/}

这是浏览器默认支持的属性,如果你要可以定制大小的,那要写 JS 脚本来控制

怎样用jquery改变DIV的滚动条的样式

  你好,可以使用css编写div滚动条样式,当然也可以用$("div").addClass();添加指定样式

  div样式属性  face-color:滑块颜色  hightlight-color:高亮颜色     3dlight-color:三维光线颜色   darkshadow-color:暗影颜色   shadow-color:阴影颜色     arrow-color:箭头颜色 t  rack-color:滑道颜色     base-color:DIV滚动条的主要颜色,其中包含滚动按钮和滚动滑块   visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效  scroll总是显示滚动条     hidden没有滚动条,超出区域的内容不可见   auto根据内容自动判断是否添加滚动条     希望可以帮助到你

css设置div滚动条样式

目前只有chrome支持设置滚动条样式,给div设置伪类

  • ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的

  • ::-webkit-scrollbar-button 滚动条两端的按钮

  • ::-webkit-scrollbar-track  外层轨道

  • ::-webkit-scrollbar-track-piece  内层滚动槽

  • ::-webkit-scrollbar-thumb 滚动的滑块

  • ::-webkit-scrollbar-corner 边角

  • ::-webkit-resizer 定义右下角拖动块的样式

如div::-webkit-scrollbar{

    width:4px

}

关于div滚动条样式到此分享完毕,希望能帮助到您。

div滚动条样式(利用div+jquery自定义滚动条样式的2种方法)

本文编辑:admin
div滚动条样式 ,jquery

更多文章:


三星折叠手机官网售价(三星折叠手机2022新款电池容量)

三星折叠手机官网售价(三星折叠手机2022新款电池容量)

本文目录三星折叠手机2022新款电池容量为什么折叠屏手机那么贵三星正式发售折叠屏手机,5G版售价超1.4万元,能否打开销售市场三星折叠手机fold3可用笔吗围观!最佳可折叠手机推荐:4款顶级可折叠屏手机,您喜欢谁三星正式发售折叠屏手机,5G

2024年5月21日 21:40

hpv阳性是什么意思怎么传染的(hpv阳性是否传染)

hpv阳性是什么意思怎么传染的(hpv阳性是否传染)

本文目录hpv阳性是否传染宫颈HPV阳性是什么意思hpv18阳性是怎么感染的hpv16阳性,是怎么感染的hpv阳性是否传染具有传染性。hpv阳性是感染人乳头病毒引起的,可通过药物进行治疗,它是通过性,分泌物进行传播。平时尽量少吃辛辣刺激的食

2024年6月27日 10:29

win10好用吗(win10好用吗)

win10好用吗(win10好用吗)

本文目录win10好用吗win10比win7好用吗Win10怎么样好用吗笔记本电脑Win7与Win10,哪个比较好用win11操作系统与win10你觉得哪个更好了有没有人觉得win10操作系统特别不方便,远不如win7操作系统好用win10

2023年10月29日 03:50

华为安卓系统好还是鸿蒙系统好(华为鸿蒙系统和安卓系统的区别)

华为安卓系统好还是鸿蒙系统好(华为鸿蒙系统和安卓系统的区别)

本文目录华为鸿蒙系统和安卓系统的区别鸿蒙系统和安卓系统哪个好会照片变黑吗华为鸿蒙系统与安卓系统相比有什么优势华为鸿蒙系统和安卓系统的区别鸿蒙系统和安卓系统各有优点:1、在性能方面,是鸿蒙性能更好。鸿蒙系统拥有更流畅的动画、更低的耗电量、更低

2023年11月28日 01:55

微2000备用金多久还款(微众银行备用金多久还款)

微2000备用金多久还款(微众银行备用金多久还款)

各位老铁们,大家好,今天由我来为大家分享微2000备用金多久还款,以及微众银行备用金多久还款的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!本文目录微众银行

2024年8月28日 05:35

联发科的芯片怎么样(联发科和高通,哪个好)

联发科的芯片怎么样(联发科和高通,哪个好)

大家好,联发科的芯片怎么样相信很多的网友都不是很明白,包括联发科和高通,哪个好也是一样,不过没有关系,接下来就来为大家分享关于联发科的芯片怎么样和联发科和高通,哪个好的一些知识点,大家可以关注收藏,免得下次来找不到哦,下面我们开始吧!本文目

2024年8月10日 01:25

联想p8刷lineageos16(联想手机如何刷机华为p8怎么刷机)

联想p8刷lineageos16(联想手机如何刷机华为p8怎么刷机)

本文目录联想手机如何刷机华为p8怎么刷机联想p8刷机提示系统找不到指定文件P8 三键强刷失败怎么办华为p8手机怎么刷机联想手机如何刷机华为p8怎么刷机不建议手机刷机的。刷机后,手机有可能无法达到最佳工作状态的,部分功能可能无法正常运行的。同

2024年7月2日 21:13

三星pl50使用手册(三星PL50的基本参数)

三星pl50使用手册(三星PL50的基本参数)

本文目录三星PL50的基本参数三星相机PL50怎么连接电脑三星PL50照相机如何使用三星PL50的基本参数数码相机昵称 PL50 数码相机类型 家用 有效像素数 1020万 最大像素数 1030万 最高分辩率

2024年3月1日 09:05

88vip消费券(88vip138卷怎么领)

88vip消费券(88vip138卷怎么领)

本文目录88vip138卷怎么领淘宝88vip折扣由谁承担88vip大额消费券需要抢吗88vip138卷怎么领1、首先,进入我的淘宝页面中,点击138元消费券的活动图片。2、其次,进入下个页面中,点击使用888积分兑换选项。3、最后,弹出一

2024年7月4日 02:32

青橙nx手机(青橙定制 手机 go nx [时光金]怎么样)

青橙nx手机(青橙定制 手机 go nx [时光金]怎么样)

本文目录青橙定制 手机 go nx [时光金]怎么样青橙nx手机打电话黑屏听说青橙NX很牛逼,这个手机到底怎么样八核手机有人用过么,青橙手机NX怎么样青橙NX的外观青橙手机nx系统更新后,通知栏不能下拉,显示com.yunos.system

2023年8月20日 11:00

能率热水器报价(一般装修全包价格是多少)

能率热水器报价(一般装修全包价格是多少)

其实能率热水器报价的问题并不复杂,但是又很多的朋友都不太了解一般装修全包价格是多少,因此呢,今天小编就来为大家分享能率热水器报价的一些知识,希望可以帮助到大家,下面我们一起来看看这个问题的分析吧!本文目录一般装修全包价格是多少能率热水器gq

2024年8月22日 08:45

摩奇游戏手机(作为一款“吃外设”手游的《和平精英》,摩奇i7s游戏手机是否能完美运行)

摩奇游戏手机(作为一款“吃外设”手游的《和平精英》,摩奇i7s游戏手机是否能完美运行)

本文目录作为一款“吃外设”手游的《和平精英》,摩奇i7s游戏手机是否能完美运行串流游戏或成主流,摩奇i7s游戏手机能用于玩串流游戏吗《生化危机》也能在手机上玩了,为什么摩奇i7s游戏手机能那么与众不同在和Steam串流以后,摩奇i7s游戏手

2024年6月24日 02:16

联想启天m410拆机教程(启天m410-d214换固态硬盘启动不了怎么办)

联想启天m410拆机教程(启天m410-d214换固态硬盘启动不了怎么办)

本篇文章给大家谈谈联想启天m410拆机教程,以及启天m410-d214换固态硬盘启动不了怎么办对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。本文目

2024年9月26日 03:50

sanyo空调(sanyo空调没有遥控器怎么开制热风)

sanyo空调(sanyo空调没有遥控器怎么开制热风)

本文目录sanyo空调没有遥控器怎么开制热风sanyo空调遥控器图标型号rcs-w1c怎么制热sanyo空调遥控器怎么用万能空调遥控器怎么用三洋Qx一24空调压缩机具多大的sanyo空调遥控器装电池的地方旁边的小开关是用来做什么用的SANY

2024年7月21日 15:42

小米手环3怎么抬腕亮屏图解?小米3拆机图解:小米3手机做工如何揭秘 (

小米手环3怎么抬腕亮屏图解?小米3拆机图解:小米3手机做工如何揭秘 (

本文目录小米手环3怎么抬腕亮屏图解小米3拆机图解:小米3手机做工如何揭秘 (小米手环3怎么抬腕亮屏图解1、我们在手机桌面左右的滑动,找到并点击已安装好的“小米运动”的图标。2、在打开的小米手环3的页面中,我们点击右下角的“我的”选项卡。3、

2024年2月7日 06:30

森海塞尔耳麦(森海塞尔MX500性能到底怎么样)

森海塞尔耳麦(森海塞尔MX500性能到底怎么样)

本篇文章给大家谈谈森海塞尔耳麦,以及森海塞尔MX500性能到底怎么样对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。本文目录森海塞尔MX500性能到

2024年8月29日 21:00

联想天逸f40拆机视频(联想天逸f41m拆机)

联想天逸f40拆机视频(联想天逸f41m拆机)

本文目录联想天逸f41m拆机联想天逸F40A光驱(吸入式)怎么拆除啊联想天逸F41笔记本怎样拆卸联想天逸笔记本如何清理风扇联想笔记本天逸F41如何拆开联想天逸f41m拆机网上搜了一下,大概有以下链接1、祝你好运O(∩_∩)O~联想天逸F40

2024年6月26日 03:54

近期文章

本站热文

电脑包尺寸对照表(电脑包要多大)
2024-07-23 11:15:58 浏览:3904
e10000(皖E10000是什么车)
2024-07-17 11:22:25 浏览:3508
ati radeon hd 5650(电脑的显卡是ATI Mobility Radeon HD 5650 (MADION PRO) ( 1 GB ) 这个显卡)
2024-07-07 05:01:37 浏览:3103
华为mate20pro版本区别(mate20pro有必要买ud版吗)
2024-07-24 08:26:42 浏览:2631
ipad买蜂窝版还是wifi版(ipad air 5买蜂窝好不好)
2024-07-17 14:35:19 浏览:2239
vivo y3配置参数(vivoy3参数是什么)
2024-07-16 07:07:06 浏览:2074
标签列表

热门搜索