`

JQ插件:nicescroll自定义滚动条

阅读更多
参考:
http://www.areaaperta.com/nicescroll/

该插件支持移动设备;
可上下、左右拖拉滚动;

看图,上面的分类菜单就是。


导入:
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>


定义需要滚动的区域,#boxscroll是vieport, #categorys是content:。这里#categorys里的内容是动态生成的。
<div id="boxscroll">
	<div id="categorys">
	</div>
</div>


我这里#categorys里面动态添加的是一个一个的span
计算每一个span的长度,叠加起来就是#categorys的长度
实际上告诉niceScroll需要滚动的距离。
我也不知道为什么要计算这个,反正动态添加的元素需要这样做。
或者调用$("#mydiv").getNiceScroll().resize();试一下,反正我没试!
var w=0;
$("#categorys").children().each(function(){
	w+=$(this).outerWidth();
});

$("#categorys").width(w);
//横向滚动
$("#boxscroll").niceScroll("#categorys",{touchbehavior:true,cursorcolor:"#FF00FF",cursoropacitymax:0.6,cursorwidth:24,usetransition:true,hwacceleration:true,autohidemode:"hidden",horizrailenabled:true});
		
  • 大小: 119.7 KB
分享到:
评论

相关推荐

    jquery自定义滚动条插件

    **jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具,尤其在现代Web设计中,为了提供更美观和个性化的界面,自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器,允许开发者对滚动条的外观和行为...

    jQuery插件:Tiny Scrollbar滚动条插件(滚动条美化、默认滚动条)

    jQuery Tiny Scrollbar是一款用于美化网页滚动条的插件,它为网页中的滚动条提供了一种简洁而优雅的呈现方式,让滚动条与整体网站设计更好地融合。本文将深入探讨Tiny Scrollbar的使用方法、功能特性以及如何在项目...

    各种jquery自定义滚动条

    除了上述插件,还有许多其他优秀的jQuery滚动条解决方案,如Nicescroll、nanoScroller等。在选择插件时,应根据项目需求考虑性能、兼容性、易用性和社区支持等因素。 总的来说,jQuery自定义滚动条为开发者提供了...

    自定义滚动条

    插件描述:自定义滚动条,实现滚轮滚动内容. 参考示例:http://www.jq22.com/jquery-info4572

    自定义美化滚动条插件

    因此,通过使用JQ(jQuery)这种强大的JavaScript库,开发者可以创建自定义的滚动条插件,以实现更加美观、与网站主题更协调的滚动效果。 描述中的“JQ浏览器滚动条插件 浏览器滚动条美化JQ浏览器滚动条插件 浏览器...

    jQuery高性能自定义滚动条美化插件

    malihu是一款高性能的滚动条美化jQuery插件。该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏。并且它可以和jQuery UI和Bootatrap完美的结合,相当的强大。

    JQ插件:radiosToSlider

    "JQ插件:radiosToSlider"是一个用于将HTML中的单选按钮(radio buttons)转换为滑块的jQuery插件。这个插件提供了一种交互性更强、视觉效果更佳的方式来呈现一组互斥的选择项,通常适用于设计简洁、现代的用户界面...

    jquery-layout和自定义滚动条

    为了解决这个问题,我们可以使用自定义滚动条插件,如“Scroller”。Scroller允许我们定制滚动条的外观和行为,使其与页面的整体设计保持一致。 要集成“Scroller”,首先需要将其对应的CSS和JavaScript文件引入到...

    自定义打造自定义滚动条,特别好用

    在网页设计中,为了提升用户体验和界面美观度,自定义滚动条已经成为了一种常见的需求。本文将详细讲解如何使用HTML的`&lt;div&gt;`元素、CSS样式以及JavaScript(包括jQuery库)来实现独具特色的自定义滚动条。 首先,...

    jquery.nicescroll的使用和案例

    1. **自定义样式**:NiceScroll 允许开发者通过CSS样式定制滚动条的外观,包括颜色、大小、形状等,以符合网站的整体设计风格。 2. **触摸设备支持**:它支持触摸事件,使得在平板电脑或手机上也能有良好的滚动体验...

    JQ插件第五十二:自定义上传HTML控件

    "JQ插件第五十二:自定义上传HTML控件"就是一个针对这种需求的解决方案,它利用jQuery库来创建一个美观且功能丰富的文件上传组件。这个插件允许用户选择文件,然后在上传成功后展示图片,提供了良好的用户体验。 在...

    jQuery table scroll表格插件内容部分加滚动条

    jQuery Table Scroll插件还支持其他高级功能,例如自定义滚动条样式、响应式设计等。在使用过程中,可以通过查阅插件的官方文档或提供的示例代码来了解更多信息。 需要注意的是,当表格数据动态加载或使用Ajax获取...

    很好的jq模拟滚动条

    "很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件,它提供了一种自定义和美化滚动条的方法,以增强网页的视觉效果和用户体验。 jQuery,简称jq,是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历...

    Jquery实现水平滚动条

    总之,通过利用jQuery插件,我们可以轻松地在网页上实现自定义的水平滚动条,提高用户体验。根据项目的具体需求,可以对滚动条的样式、行为和交互进行细致的定制。确保选择一个稳定且支持良好维护的插件,并参考其...

    jq仿滚动条,超简单易用

    "jq仿滚动条,超简单易用"是一个专门针对jQuery(jq)开发的滚动条插件,旨在提供一种更美观、自定义程度更高的滚动条解决方案,同时考虑到老版本IE浏览器的兼容性。 首先,我们需要理解jQuery(jq)是什么。jQuery...

    jQuery自定义滚动条完整实例

    ### jQuery自定义滚动条知识点概述 #### 1. jQuery自定义滚动条的概念 自定义滚动条是指,在Web开发中,开发者可以通过JavaScript和CSS自定义滚动条的样式,使滚动条符合网页整体的美观设计。常见的场景是,当默认...

    jQuery滚动插件

    4. **配置选项**:许多滚动插件支持自定义配置,如滚动速度、动画类型等。根据插件文档,可以设置相应的参数以满足需求。 5. **扩展功能**:结合jQuery的其他API,可以实现更复杂的交互,如在滚动过程中执行特定的...

    JQuery滚动条

    JQuery作为一个强大的JavaScript库,提供了丰富的API和插件,使得我们能够轻松地自定义和美化页面中的滚动条,以提升整体的视觉效果和交互体验。本文将深入探讨JQuery滚动条的相关知识点,包括如何使用JQuery实现...

    JQ第三方分享插件+可自定义链接、标题

    "JQ第三方分享插件+可自定义链接、标题"这个标题揭示了一个基于jQuery的第三方分享工具,它允许开发者方便地在他们的H5页面上实现社交分享功能,并且可以定制分享的链接和标题,以满足不同场景的需求。 jQuery是一...

    自定义美化滚动条jquery-mCustomScrollbar插件

    实现了自定义美化滚动条jquery插件,主要用了jquery滚动条插件jquery.mCustomScrollbar.js,原下载地址:http://www.jq-school.com/Detail.aspx?id=348

Global site tag (gtag.js) - Google Analytics