jquery设置滚动条样式
- HTML结构 下面是该滚动条插件工作所必须的HTML结构:
<
div
id
=
"about"
class
=
"nano"
>
<
div
class
=
"nano-content"
> ... content here ... </
div
>
</
div
>
- CSS样式 在HTML<header>中引入nanoscroller.css文件。
<link rel=
"stylesheet"
href=
"nanoscroller.css"
>
你必须为容器指定一个宽度和高度,并为你的滚动条定制一些基本样式,例如:
.nano {
background
:
#bba
;
width
:
500px
;
height
:
500px
; }
.nano .nano-content {
padding
:
10px
; }
.nano .nano-pane {
background
:
#888
; }
.nano .nano-pane > .nano-slider {
background
:
#111
; }
- JAVASCRIPT
在页面中引入jquery.nanoscroller.js文件。<script type=
"text/javascript"
src=
"js/jquery.nanoscroller.js"
></script>
然后使用下面的方法调用该滚动条插件,HTML中所有带有.nano的DOM元素都会被应用上该方法:
$(
".nano"
).nanoScroller()
$(".nono").niceScroll({
cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值
cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
cursorwidth: "5px", // 滚动条的宽度,单位:便素
cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
cursorborderradius: "5px", // 滚动条圆角(像素)
zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值
scrollspeed: 60, // 滚动速度
mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
touchbehavior: false, // 激活拖拽滚动
hwacceleration: true, // 激活硬件加速
boxzoom: false, // 激活放大box的内容
dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in(两个手指外张或收缩)
grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
autohidemode: true, // 隐藏滚动条的方式, 可用的值:
true | // 无滚动时隐藏
"cursor" | // 隐藏
false | // 不隐藏,
"leave" | // 仅在指针离开内容时隐藏
"hidden" | // 一直隐藏
"scroll", // 仅在滚动时显示
background: "", // 轨道的背景颜色
iframeautoresize: true, // 在加载事件时自动重置iframe大小
cursorminheight: 32, // 设置滚动条的最小高度 (像素)
preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
railoffset: false, // 可以使用top/left来修正位置
bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
spacebarenabled: true, // 当按下空格时使页面向下滚动
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
disableoutline: true, // 当选中一个使用nicescroll的div时,chrome浏览器中禁用outline
horizrailenabled: true, // nicescroll可以管理水平滚动
railalign: right, // 对齐垂直轨道
railvalign: bottom, // 对齐水平轨道
enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
enablekeyboard: true, // nicescroll可以管理键盘事件
smoothscroll: true, // ease动画滚动
sensitiverail: true, // 单击轨道产生滚动
enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
cursorfixedheight: false, // 修正光标的高度(像素)
hidecursordelay: 400, // 设置滚动条淡出的延迟时间(毫秒)
directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素)
nativeparentscrolling: true, // 检测内容底部便于让父级滚动
enablescrollonselection: true, // 当选择文本时激活内容自动滚动
cursordragspeed: 0.3, // 设置拖拽的速度
rtlmode: "auto", // DIV的水平滚动从左边开始
cursordragontouch: false, // 使用触屏模式来实现拖拽
oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动,如果设为false则不支持水平滚动,如果设为auto支持双轴滚动
scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
preventmultitouchscrolling: true // 防止多触点事件引发滚动
});
jquery设置滚动条样式的更多相关文章
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- CSS设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
- CSS设置滚动条样式[转]
原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...
- 转载自前端开发:CSS设置滚动条样式
浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- CSS之设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
- 如何在textarea多行文本框中设置滚动条样式
其中设置滚动条的组成都有以下部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决 ...
- jquery 设置css样式
$("#61dh a").css('color', 多个样式属性 var divcss = { background: '#EEE', width: '478px', mar ...
- 使用CSS设置滚动条样式以及如何去掉滚动条的方法
<STYLE> BODY { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SH ...
随机推荐
- php 数组插入元素
<?php $a=array("red","green"); array_push($a,"blue","yellow&qu ...
- RabbitMQ面试问答(子文章)(持续更新)
-----> 总文章 入口 文章目录 [-----> 总文章 入口](https://blog.csdn.net/qq_37214567/article/details/90174445) ...
- 生成uuid 和 检验
//注意replaceAll前面的是正则表达式 String uuid = UUID.randomUUID().toString().replaceAll("-","&q ...
- element-ui表格显示html格式
<el-table-column type="String" label="内容" prop="tpl" width="58 ...
- mfc封装cef浏览器 关闭整个窗口程序得时候又重启mfc 应用的程序
最近使用mfc 做了一个cef得浏览器 多标签得.当使用这个封装得浏览器一段时间之后(超过1分钟2分钟) 当关闭封装得浏览器整个窗体 x得时候,整个窗体又重新弹了出来. 大概现象就是一个exe程序你杀 ...
- js 对象 toJSON 方法
浅谈 js 对象 toJSON 方法 前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一 ...
- STM32 软件按键消抖
引言 通常按键所用的开关都是机械弹性开关,当机械触点断开.闭合时,由于机械触点的弹性作用,一个按键开关在闭合时不会马上就稳定的接通,在断开时也不会一下子彻底断开,而是在闭合和断开的瞬间伴随了一连串的抖 ...
- 即时通信系统IM--XMPP
即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷:服务提供商也提供了越来越丰富的通讯服务功能. 不容置疑,Internet已经 ...
- CMD命令打包文件夹成jar
网上的很多例子都是直接将在dos界面下输入jar命令出现的帮助信息给贴上了.不明白的人根本看不懂.当然我也看不懂,好在自己试了好多遍,终于成功了.现在我就根据我刚刚的操作来说明一下. 我介绍的是将一个 ...
- keep-alive 实现从列表页到详情页,然后再回到列表页并保持原来列表页的页码数,并且只刷新数据
思路: keep-alive应用场景介绍 <keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例.结合router,缓存部分页面 activated 和 deactiv ...