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

怎样用jquery改变DIV的滚动条的样式,第1张

你好,可以使用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根据内容自动判断是否添加滚动条 

希望可以帮助到你

(摘自博客园,原网址http://www.cnblogs.com/reweb/p/3268775.html)

jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。

页面使用:

$("html").niceScroll({

cursorcolor:"#E62020",

cursoropacitymax:1,

touchbehavior:false,

cursorwidth:"10px",

cursorborder:"0",

cursorborderradius:"5px"

})

nicescroll详细参数配置:

cursorcolor - 设置滚动条颜色,默认值是“#000000”

cursoropacitymin - 滚动条透明度最小值

cursoropacitymax - 滚动条透明度最大值

cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)

cursorborder - CSS定义边框,默认为“1px solid #FFF”

cursorborderradius - 滚动条的边框圆角

ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999

scrollspeed - 滚动速度,默认值是60

mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)

touchbehavior - 让滚动条能拖动滚动触摸设备默认为false

hwacceleration - 使用硬件加速滚动支持时,默认为true

boxzoom - 使变焦框的内容,默认为false

dblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为true

gesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为true

grabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是true

autohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏

的背景下,改变铁路背景的CSS,默认值为“”

iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)

cursorminheight,设置最低滚动条高度(默认值:20)

preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)

railoffset,您可以添加抵消顶部/左轨位置(默认:false)

bouncescroll,使滚动反d结束时的内容移动(仅硬件ACCELL)(默认:FALSE)

spacebarenabled,允许使用空格键滚动(默认:true)

railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})

disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)

jquery在rd中显示滚动条可以用div+css方式实现。调用 overflow-y: scroll样式就会出现滚动条。

css样式:

<style>

table {

border: 1px solid black

border-collapse: collapse

}

td {

border: 1px solid black

}

table div {

height: 50px

overflow-y: scroll

}

</style>

table主体:

<table border="1">

<tr>

<th>Month</th>

</tr>

<tr>

<td>

<div>

12月

</div>

</td>

</tr>

</table>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/7797704.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存