黑马程序员UI教程：网页滚动自定义条美化

2022-05-19 22:52:16 第一文档网 [ 字体：小中大 ] [

阅读： ] [

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。下载word有问题请添加QQ：admin处理，感谢您的支持与谅解。

【#第一文档网# 导语】以下是®第一文档网的小编为您整理的《黑马程序员UI教程：网页滚动自定义条美化》，欢迎阅读！
黑马,程序员,美化,滚动,定义

jquery.nicescroll.js是一个 jquery 插件，需要jquery库的支持，它能够轻松的美化浏览器默认的滚动条，支持水平滚动条。甚至于强大到它支持盒子、 Iframe、文本区域、和文档页滚动条。那么下面我们来看看兼容性如何：

浏览器兼容：火狐 4 +，Chrome 5 + Safari 4 + (win/mac)，Opera 10 + IE 6+。

移动端兼容： iPad Iphone、 Android 2.2 +，黑莓手机与 Playbook （WebWorks/表 OS）、

Windows Phone 7.5 芒果和 Windows Phone 8。

兼容性说完后下面我们正式的来学习如何使用吧！使用方法：

它是一个 jquery 的插件，您需要在代码中引用jquery库从 1.5.x 以上版本。 HTML

首先我们在#wrap加入一定高度的内容。一定要出现滚动条，不然看不到效果。

id="wrap">

能撑出高度的内容，直到出现滚动条 ......

接着我们引入jQuery库和nicescroll插件：

type="text/javascript" src="jquery.js">

type="text/javascript" src="js/jquery.nicescroll.js">

jQuery

调用niceScroll 滚动条插件非常简单：

$('#wrap).niceScroll({

cursorcolor: "#ccc",//#CCC 光标颜色

cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0

touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "5px", //像素光标的宽度

cursorborder: "0", // 游标边框css定义 cursorborderradius: "5px",//以像素为光标边界半径 autohidemode: false //是否隐藏滚动条 });

以上是盒子显示滚动条的方法，网页滚动条的方法也是一模一样，只需要改变选择的对象即可。（如需自定义浏览器默认滚动条，请使用以下代码）页面滚动条

body{height:3000px} $('body').niceScroll({

cursorcolor: "#ccc",//#CC0071 光标颜色

cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0

touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "5px", //像素光标的宽度

cursorborder: "0", // 游标边框css定义 cursorborderradius: "5px",//以像素为光标边界半径 autohidemode: false //是否隐藏滚动条 });

本文来源：https://www.dywdw.cn/29c9f2c1d5d8d15abe23482fb4daa58da1111c5d.html