jquery.nicescroll.js是jquery的开源插件,使用也非常简单,如何使用网上已讲的非常详细了,不会的
可以参考:http://nicescroll.areaaperta.com/
nicescroll的兼容性非常强,基本上所有的浏览器都可以使用,但是这么完美的插件还是存在它不足的地方。
在ie8上,偶尔会出现这样的情况:
页面会随着鼠标箭头的移动而滚动。根据我的个人经验,当你用鼠标按着滚动条上下滑动3s时会出现上述情况,当你再次用鼠标按着滚动条3s不动时,该现象会消失,这是为什么呢?
个人认为,该滚动条是设置在body或html上时会出现这种情况,如果在html内部,存在小范围的滚动条就没有这种情况了。所以,解决在ie8(及以下浏览器)中出现的这种问题,就是隐藏存在于body或html上的滚动条,在body下新增一个div标签,将滚动条添加在该div标签上。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery NiceScroll plugins</title> <script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script> <script src="http://cdn.staticfile.org/nicescroll/3.5.4/jquery.nicescroll.min.js"></script> <style type="text/css"> html,body{overflow-x:hidden;overflow-y:hidden;width:100%;height:100%;margin:0px;padding:0px;} .txtblock{width:600px;height:200px;margin:10px auto;padding:0px;z-index:9999;} </style> <script> $(document).ready(function() { $(".txtblock").niceScroll({styler:"fb",cursorcolor:"#000",cursorborderradius:"5px"}); $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true}); }); </script> </head> <body> <div class="txtblock"> <h1>Scrollable div (with wrapper div), custom color and zoom feature</h1> <p>You can call zoom-in/zoom-out with double click on div or click on the upper icon (or use pitch gesture on ipad). When you use wrapper, Nicescroll try to enable hardware accelerated scrolling.</p> <div id="divexample2" style="overflow: auto; position: relative; outline: none;height:150px; width:400px;"> <div id="wrapperexample2" > <p>Google began in January 1996 as a research project by Larry Page and Sergey Brin when they were both PhD students at Stanford University in California.[30] While conventional search engines ranked results by counting how many times the search terms appeared on the page, the two theorized about a better system that analyzed the relationships between websites.[31] They called this new technology PageRank, where a website's relevance was determined by the number of pages, and the importance of those pages, that linked back to the original site.[32][33] A small search engine called "RankDex" from IDD Information Services designed by Robin Li was, since 1996, already exploring a similar strategy for site-scoring and page ranking.[34] The technology in RankDex would be patented[35] and used later when Li founded Baidu in China.[36][37] Page and Brin originally nicknamed their new search engine "BackRub", because the system checked backlinks to estimate the importance of a site.[38][39][40] Eventually, they changed the name to Google, originating from a misspelling of the word "googol",[41][42] the number one followed by one hundred zeros, which was picked to signify that the search engine wants to provide large quantities of information for people.[43] Originally, Google ran under the Stanford University website, with the domain google.stanford.edu.[44] The domain name for Google was registered on September 15, 1997,[45] and the company was incorporated on September 4, 1998. It was based in a friend's (Susan Wojcicki[30]) garage in Menlo Park, California. Craig Silverstein, a fellow PhD student at Stanford, was hired as the first employee.[30][46][47] In May 2011, unique visitors of Google surpassed 1 billion mark for the first time, an 8.4 percent increase from a year ago with 931 million unique visitors.[48] </p> </div> </div> </div> </body> </html>
注:在设置body样式的时候,同时也要设置html的样式,因为在ie7中,它俩的页面范围是不一样的。
相关推荐
今天给大家介绍一款功能强大的jquery.nicescroll插件,主要用户自定义个滚动条效果,使用方法非常简单,只需要将jquery库以及本插件引入页面中(要在效果之前引用),然后用一段JS调用即可 本案例适合手机客户端,可以...
一款非常完美的滚动条,简称nicescroll...只要依次引入jquery库以及jquery.nicescroll插件,然后将需要滚动部分外部的id或者class号替换为 lanrenzhijia即可,其中滚动条的颜色以及宽度均在js中可以控制,效果简单易用
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下。 Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不...
jquery.nicescroll兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条,资源附有相关示例,使用简单便利。
jquery.nicescroll无滚动条左右拖拽
jquery.nicescroll.min-3.7.6.js
jquery.nicescroll插件包,内附无缝滚动实例及详细说明
jquery.nicescroll美化滚动条插件鼠标滑过显示 jquery.nicescroll美化滚动条插件鼠标滑过显示
jquery.nicescroll插件实现的左右拖拽效果,可看作是jquery.nicescroll.js插件演示示例,鼠标在图片上按住鼠标左键,移动鼠标即可拖动图片左右滑动,无缝对接,如果图片处理全景图,则可实现全景拖动浏览功能。
2. 通过 jquery 获取需要添加滚动条的元素,调用 niceScroll 函数进行配置即可使用该插件,如下 1 2 3 4 5 6 7 8 9 $('#content').niceScroll({ cursorcolor: "#ccc",//#CC0071 光标颜色 cursoropacitymax: 1, //...
Nicescroll3是一款仿IOS滚动条样式,支持全屏切换,滚动条美化的jquery.nicescroll插件。
解决火狐浏览器滚动条样式无法修改j,query.nicescroll.js好用的滚动条插件,
jquery.nicescroll仿IOS滚动条美化插件
jQuery仿IOS滚动插件Nicescroll3是一款支持全屏切换,滚动条美化的jquery.nicescroll插件。
jQuery.nicescroll美化滚动条 jQuery.nicescroll美化滚动条
一款无滚动条左右拖拽的jquery.nicescroll插件.zip 一款无滚动条左右拖拽的jquery.nicescroll插件.zip 一款无滚动条左右拖拽的jquery.nicescroll插件.zip
一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.兼容其他插件、只需要引入下 初始化一下就可以生效了
好用的滚动样式加载
query.nicescroll无滚动条左右拖拽是一款功能强大的jquery.nicescroll插件,主要用户自定义个滚动条效果。