自定义滚动条插件 mCustomScrollbar 使用介绍

【自定义滚动条插件 mCustomScrollbar 使用介绍】的更多相关文章

自定义滚动条插件 mCustomScrollbar 使用介绍

引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http://manos.malihu.gr/jquery-custom-content-scroller/…

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目前寻找的成果来说,找到了两个比较不错的 jQuery 插件:jScrollPane和 mCustomScrollbar.关于前者,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大.效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官…

javascript自定义滚动条插件，几行代码的事儿

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title…

JavaScript学习笔记- 自定义滚动条插件

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

JavaScript-JQ实现自定义滚动条插件1.0

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

Jquery自定义滚动条插件

下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery.nicescroll.js"></script> $(document).ready( function() { $("html").niceScroll(); } ); var nice = false; $(document).ready( function…

滚动条插件mCustomScrollbar

1. 参考网站 http://www.wufangbo.com/mcustomscrollbar/ 2. 使用方法…

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus…

自定义滚动条 - mCustomScrollbar

项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-custom-content-scroller/ 转自:http://www.wufangbo.com/mcustomscrollbar/ 关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动…

自定义滚动条mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等.(HTML必须存在于文档流, 不能为display:none) 1.如何使用 mCustomScrollbar(必…

自定义jQuery插件Step by Step

1.1.1 摘要随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Design:但我们今天不是介绍它,正由于前端开发已经十分重要了,所以我们将介绍如何使用jQuery自定义插件. 相信大家都使用过jQuery库,甚至自定义过一些常用的jQuery插件,如果没有学习过也无需担心,接下来我们将从一些简单的例子开始. 本文目录控件模式 SignUp表单 Validation对象…

使用css实现无滚动条滚动+使用插件自定义滚动条样式

使用css实现无滚动条滚动,摘抄自:曹小萌博客使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width,就是用一个无滚动条的div包裹另一个有滚动条的div,从而实现隐藏滚动条的效果. 直接撸代码: <body> <div class="box_wrap">…

在angular4.X里使用mCustomScrollbar滚动条插件

参考网上的方法https://stackoverflow.com/questions/36755625/how-to-import-jquery-and-mcustomscrollbar-plugin-into-angular2-component 对其配置,有的时候会出现问题,可以尝试更换一下mCustomScrollbar的版本. 可以不用install在项目里,直接将所需的js和css下载下来后放在项目的静态文件夹目录下.然后在angular.json里对其引用. 如下图为必须文件: 一些…

自定义滚动条样式（jQuery插件、Webkit、IE）

-------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http://www.jsfoot.com/shouye/ue-design/ http://blog.sina.com.cn/s/blog_4abb9bba0101bgu7.html -------------webkit内核滚动条------------- webkit现在支持拥有overflow属性的区…

使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下

.div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行content里面添加div_box的,这时候滚动条初始化才开始在div_box元素上进行: 小结: $('.content .div_box').mCustomScrollbar()配合参数live:on向未来元素.div_box上加个滚动条方法,猜想是这时候是绑定了一个事件:在div_box被创建出来…

使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate

碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3">这种方式来初始化滚动条: 然后在$(fucntion(){})里面写div_box中添加内容append函数: 但是发现div_box中没有内容. 经分析是因为先执行了在div_box中append内容,而由于是要在div_box .mCSB_container下面添加内容的,但是这时候滚动…

使用jquery.mCustomScrollbar自定义滚动条（2）

参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的自定义滚动条</title> <link rel="style…

使用jquery.mCustomScrollbar自定义滚动条（1）

参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-custom-content-scroller/# 常用的theme: dark light light-2 light-3 light-thick light-thin dark-thin inset inset-2" 3d 3d-dark 3d-thick minimal-dark 下面是最简单的使…

自定义滚动条jQuery插件- Perfect Scrollbar

主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计滚动条支持完整的自定义滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化依赖于jQuery和相关几个类库不需要定义宽度和高度.它会固定在容器的右下你可以修改任何滚动条的样式,不依赖于其它脚本滚动条支持'update'方法.如果你需要修改滚动条的位置和大小,只需要调用这个方法即可不使用'scrollTop'和'scrollLeft',不是用任何绝对定位使用要求: 必须有一个内容元素容器必须拥有一个'posi…

jquery-leonaScroll-1.3-自定义竖向自适应滚动条插件

下载链接地址:https://share.weiyun.com/9ac3ca3fb29648bb1aad1b83a76b123c (密码:4y9t)[含mini版] 欢迎使用leonaScroll-1.3.js,如您在使用过程中发现更多问题,欢迎指正! 介绍:是一款基于jquery框架实现的自定义竖向自适应滚动条. 插件大小:leonaScroll-1.2 .js 10.2KB leonaScroll-min-1.2.js 6.39KB 更新…

jquery-leonaScroll-1.2-自定义滚动条插件

leonaScroll-1.2.js 下载链接地址:http://share.weiyun.com/bb531dd6b1916c0023c176897182dc15 (密码:iZck)[内含压缩版] 欢迎使用leonaScroll-1.2.js,如您在使用过程中发现更多问题,欢迎指正! 介绍:是一款基于jquery框架,结合mousewheel插件实现的自定义竖向滚动条. 插件大小:leonaScroll-1.2 .js 9.14KB leonaScr…

jquery-leonaScroll-1.1-自定义滚动条插件

leonaScroll-1.1最新版-竖向 leonaScroll-1.1.js欢迎使用leonaScroll-1.1.js,此滚动条仅支持竖向滚动,如您在使用过程中发现更多问题,欢迎指正! 更新:1.1版本1.修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂2.用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由3.增设了滚动条宽度.上下微调按钮高度,滚动文本区域的设置4.增设了文本内容未超出时是否显…

网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu…

VUE滚动条插件——vue-happy-scroll

最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件.最开始用的是Easy-scroll插件,可是在使用过程中,发现一个问题——由于在开发过程中,需要经常打开开发者选项进行调试,可是只要一开启这个选项,Easy-scroll插件就会出现debugger断点,在网上也一直没找到怎么取消debugger.后来就找到了今天要说的这款插件:vue-happy-scroll. 先张贴一张…

基于Jquery的textarea滚动条插件(原创)

之前项目中自己写的滚动条插件.先前太忙没有好好整理.现在项目间歇期拿出来整理后贴出来 Demo Here css 我是把mCustomScrollbar 的UI 扣下来的. 这里我要介绍下这个插件不错.可以满足日常使用 js 没有啥困难的demo中都有. 其中有一些关键方法我举出来 1:addStyle var addStyle = function($dom,addStyleObject) { var sStyle = $dom.attr('style'), aStyle = sStyle ?…

jquery自定义滚动条鼠标移入或滚轮时显示鼠标离开或悬停超时时隐藏

一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自http://www.17sucai.com/pins/426.html但是下载demo需要先注册,还要20积分.显然,这违背了互联网的共享精神,so,F12,load it. 分析源码,发现了一个强大灵活的插件,感谢开发者.插件:jquery.jscrollpane.min.js主页: http:/…