概述

jScrollPane.js是一个轻量级的滑块插件, 非常方便使用. 在前端工业界(写页面)使用非常广泛, 下面我记录下用法, 供以后开发时参考, 相信对其他人也有用.

PS: 想起之前我用impress.js写了一个PPT, 当时觉得有多了不起, 现在用的插件一多, 就觉得以前真是好笑, impress.js也就是一个一般的插件罢了...

不用jScrollPane.js

先来看看不用jScrollPane.js, 给一个wrap设定高度, 再给这个wrap加上内容, 内容的高度大于wrap的高度, 会发生什么?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
<style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人,颜值还是那么低,也不说话。</p>
<p>我不敢靠近你,这就是理由</p>
<p>等到我靠近你,才发现我,喜欢上你了。</p>
<p> 等我想真正得追你得时候,才发现已经晚了</p>
<p>不知道还有没有机会,成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></div>
</body>
</html>

demo
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
</style>

我知道我是一个没车没房得人,颜值还是那么低,也不说话。

我不敢靠近你,这就是理由

等到我靠近你,才发现我,喜欢上你了。

等我想真正得追你得时候,才发现已经晚了

不知道还有没有机会,成为你得另一半了。

陪伴到老

可以看到, scroller元素里面的内容超出了它的范围并且伸到外面去了.

使用overflow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
<style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人,颜值还是那么低,也不说话。</p>
<p>我不敢靠近你,这就是理由</p>
<p>等到我靠近你,才发现我,喜欢上你了。</p>
<p> 等我想真正得追你得时候,才发现已经晚了</p>
<p>不知道还有没有机会,成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></div>
</body>
</html>

demo
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
</style>

我知道我是一个没车没房得人,颜值还是那么低,也不说话。

我不敢靠近你,这就是理由

等到我靠近你,才发现我,喜欢上你了。

等我想真正得追你得时候,才发现已经晚了

不知道还有没有机会,成为你得另一半了。

陪伴到老

可以看到, 只用css就给scroller元素加了一个滚动条, 不过这个滚动条是系统自带的滚动条. 如果要自定义滚动条的话, 可以使用jScrollPane.js.(注意, 需要和jquery一起使用.)

使用jScrollPane.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
</style>
</head>
<body>
<div class="scroller" style="">
<p>我知道我是一个没车没房得人,颜值还是那么低,也不说话。</p>
<p>我不敢靠近你,这就是理由</p>
<p>等到我靠近你,才发现我,喜欢上你了。</p>
<p> 等我想真正得追你得时候,才发现已经晚了</p>
<p>不知道还有没有机会,成为你得另一半了。</p>
<p>陪伴到老</p>
</div>
<div class="app"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$('.scroller').jScrollPane();
});
</script>
</body>
</html>

demo

<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
background-color: #666;
overflow: scroll;
}
.app {
width: 240px;
height: 140px;
background-color: green;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$('.scroller').jScrollPane();
});
</script>

我知道我是一个没车没房得人,颜值还是那么低,也不说话。

我不敢靠近你,这就是理由

等到我靠近你,才发现我,喜欢上你了。

等我想真正得追你得时候,才发现已经晚了

不知道还有没有机会,成为你得另一半了。

陪伴到老

可以看到,自定义了一个滚动条, jScrollPane还有许多其它的参数配置, 这些参数配置才是它真正的强大之处. 在此就不介绍了, 自行百度~

JScrollPane的使用的更多相关文章

  1. jScrollPane 美化滚动条

    在线实例 滚动条可见 滚动条隐藏 使用方法 <div class="container"> <h1>滚动条可见</h1> <div cla ...

  2. JAVA 如何使JScrollPane中的JTextArea自动滚动到最后一行?

    1.要使JTextArea带有滚动条,需将JTextArea对象添加到JScrollPane中. JTextArea logArea = new JTextArea(15, 35); //创建JTex ...

  3. 总结-swing、JFrame、JScrollPane、JTabbedPane、JEditorPane

    总结-swing.JFrame.JButton.JScrollPane.JLabel.JTabbedPane.JEditorPane 1.JButton内边距(去掉按钮里的空白):setMargin2 ...

  4. fancybox,Ckeditor,jscrollpane 笔记串烧

    有用到一些插件,整理了一些笔记,分享一下. 一.Fancybox 很酷很强大的弹窗插件 官网地址:Fancybox,基于jquery,开源协议是GPL和MIT. 主要的特点是:能展示图片,html元素 ...

  5. JAVA学习Swing章节JPanel和JScrollPane面板的简单学习

    package com.swing; import java.awt.Container; import java.awt.GridLayout; import javax.swing.JButton ...

  6. java中如何将JScrollPane的垂直滚动条自动移动到最下端

    JPanel QQP = new JPanel(); JScrollPane jsp = new JScrollPane(QQP); JScrollBar jsb = jsp.getVerticalS ...

  7. overflow样式修改插件——jscrollpane

    官网:http://jscrollpane.kelvinluck.com/

  8. JScrollPane与JPanel 滚动条 解决canvas的滚动条问题

    当用JScrollPane和JPanel显示图片时,需要将JPanel的PrefferedSize及时传递给JScrollPane,否则容易出现JScrollPane的滚动条无法与图片大小匹配的问题, ...

  9. jquery美化滚动条插件jscrollpane应用(转)

    原文地址:http://www.jqcool.net/jquery-jscrollpane.html jScrollPane是一个设计非常灵活的跨浏览器的jQuery ,它将浏览器的默认滚动条或是元素 ...

  10. JAVA GUI学习 - JList列表、JScrollPane滚动条组件学习

    /** * 本例结合JList和JScrollPane共同使用 * @author Wfei * */ public class JListKnow extends JFrame { JList jL ...

随机推荐

  1. Python __slots__限制动态添加变量

    Python是一种非常灵活的动态语言,有时感觉太灵活以至于不知道遵循什么样的规则去驾驭.不过Python已经是非常完备的语言,想实现什么样的功能都是有方法的,而且也很容易,比如限制一个类动态添加成员变 ...

  2. UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新

    如题.如果不更新,而选择 : use newest version installed ,打包到结尾时可能会报错,莫名其妙的java错误 而且,SDK一旦被更新后,其所在目录的 SDK MANAGER ...

  3. 示例:pm_multiple_models 匹配——形状匹配

    * This example program shows how to use HALCON's shape-based matching* to find multiple different mo ...

  4. ajax----tomact服务器运行

    一.菜鸟教程的代码本地运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. 初学c# -- 学习笔记(9) 关于SQL2008

    在做一个局域网的类似网盘的学习练习,服务端差不多了,在改bug.用vlc的dll做的全格式视频.音频预览在线播放下载等等. 在做服务端也遇到了一些问题,走了好多弯路. 开始把上传的视频.音频.图像.文 ...

  6. Cobbler安装CentOS7系统时报错 What do you want do now?

    问题的根源: 在cobbler服务主机中执行了  createrepo --update  /var/www/cobbler/ks_mirror/CentOS-7-x86_64/ 导致的. cobbl ...

  7. c++ 面试题(算法类)

    1,从无序的数据流中找到其中位数:(用大根堆和小根堆来实现) float getMidimum(vector<int>& nums) { priority_queue<int ...

  8. hdoj2089(入门数位dp)

    题目链接:https://vjudge.net/problem/HDU-2089 题意:给定一段区间求出该区间中不含4且不含连续的62的数的个数. 思路:这周开始做数位dp专题,给自己加油^_^,一直 ...

  9. cast

    https://blog.csdn.net/seabeam/article/details/47841539 在UVM中经常可以看到$cast的身影,这是SV的build-in task之一,当然它还 ...

  10. c#: Label控件加入AutoHeight属性

    此功能在界面布局中颇为实用,录代码以记之: public class LabelEx : Label { private bool autoHeight = true; [DefaultValue(t ...