jquery滚动条插件jScrollPane的使用介绍

这是一个js的页面滚动条插件
使用时引入三个文件：（路径自行填写）


代码如下:

<link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="路径/jquery.mousewheel.js"></script>
<script type="text/javascript" src="路径/jquery.jscrollpane.min.js"></script>

然后再给需要添加滚动条的容器加上一个方法，搞定


代码如下:

$(function(){
$("#contentDiv").jScrollPane();
})

太好用了！
ps：如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改
当然这作为jquery的一个插件，原始的jquery包不能少且要放在插件包之前，本文略。

赞 (0)

相关推荐

  • 新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板

    新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板

    WDCP也算是国产中颇受大家欢迎的VPS主机面板了,提供了nginx.apache.mysql.php等Web建站环境一键搭建.印象中,国内VPS主机面板也就是WDCP还在坚持着,AMH已经走上了收费的道路(PS:免费版本长年不更新,各种问题和不兼容). 而WDCP实际上也有长达几年的时间没有更新了,mysql.php版本都停留好早以前的版本,新出来的一直都没有更新, 已经不能满足于现在的Wordpress建站需要了,这也是部落为什么要扔掉VPS面板!网站平滑迁移到LNMP或LAMP建站. 好在

  • 宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站

    宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站

    Linux免费开源,建站基本上都是选择Linux系统,而且Linux VPS比Windows VPS要便宜不少,成本大大降低,除非程序有特殊需要,否则还是建议大家使用Linux来当作网站服务器.不过,选择Linux有一个不好的地方就是操作麻烦些. 如果是Linux新手的话,在最开始建站时可以试试使用Linux VPS主机控制面板,只要在你的VPS主机上安装一个主机管理面板,这样你就可以像使用虚拟主机那样去绑定域名和管理MysqL数据库了,而且VPS主机允许你最大化地调整服务器配置参数,折腾过程也

  • Java常用面板之JScrollPane滚动面板实例详解

    在设置界面时,可能会遇到一个较小的容器窗体中显示一个较大部分的内容的情况,这时候可以使用 JScrollPane 面板. JScrollPane 面板是带滚动条的面板,它也是一种容器,但是 JScrollPane 只能放置一个组件,并不可以使用布局管理器.如果需要在 JScrollPane 面板上放置多个组件,需要将多个组件放置在 JPanel 上,然后将 JPanel 面板作为一个整体组件添加在 JScrollPane 组件上.这点大家一定要注意!下面我们通过一个实例来了解下它的使用方法和技巧

  • Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程

    Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程

    Ajenti是国外一个功能非常强大的轻型的Linux服务器管理面板,采用Python架构,修改扩展非常简单,包含了Apache.计划任务(Cron).文件系统.防火墙.MySQL.Nginx.Munin.Samba.FTP和Squid等多个实用插件,比较适合搭建小型的服务器管理环境. Ajenti V是Ajenti一个虚拟主机管理面板插件,有点类似于Webmin下的Virtualmin,Ajenti V可以用于创建和管理虚拟主机,方便建站,管理网站运维.Ajenti可以添加Widget,方便你快

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • 宝塔Linux面板 2.8.9稳定版介绍

    宝塔Linux面板 2.8.9稳定版介绍

    暂时只对 CentOS 5.x / 6.x / 7.x 提供支持: 包含软件: Nginx-Tengine-2.2.0 Nginx1.8 - 1.10 Apache2.4.20 PHP5.2 - 7.1(安装时可选,支持多版本共存,除php7.0,php7.1都已包含zendloader) MySQL5.5 - 5.7(安装时可选) Pure-Ftpd phpMyadmin WEB在线面板 系统要求: 内存:128M以上,推荐512M以上 磁盘:至少4GB可用磁盘空间 其它:确保是干净的操作系统

  • jQuery EasyUI Accordion可伸缩面板组件使用详解

    jQuery EasyUI Accordion可伸缩面板组件使用详解

    Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=

  • jquery滚动条插件jScrollPane的使用介绍

    这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js

  • jQuery滚动条插件nanoscroller使用指南

    jQuery滚动条插件nanoscroller使用指南

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

  • jquery滚动条插件slimScroll使用方法

    本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下 simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件 2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimSc

  • jquery滚动条插件（可以自定义）

    以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&

  • jQuery日历插件datepicker用法详解

    jQuery日历插件datepicker用法详解

    jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入下

  • jQuery中Nicescroll滚动条插件的用法

    本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下. Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 引入核心文件

  • 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 simpleModal插件的使用介绍

    SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口.是一个模态对话框的框架. SimpleModal使您可以灵活地构建任何你可以设想,而屏蔽相关的跨浏览器问题. (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js 1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻

  • 学习使用jquery iScroll.js移动端滚动条插件

    大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

  • jquery自定义滚动条插件示例分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

随机推荐