使用方法

<div style="position: relative;">
  <div id="wrapper">
    <div class="scroll">
      <ul class="index_nav_bar">
      <li class="li_active">全部</li>
      <li><a href="javascript:void(0);">护肤</a></li>
      <li><a href="javascript:void(0);">彩妆</a></li>
      <li><a href="javascript:void(0);">日用百货</a></li>
      <li><a href="javascript:void(0);">食品</a></li>
      <li><a href="javascript:void(0);">护肤</a></li>
      <li><a href="javascript:void(0);">彩妆</a></li>
      <li><a href="javascript:void(0);">日用百货</a></li>
      </ul>
    </div>
  </div>
</div>

注意:如果要在页面中使用,最好加一个外层div设置position:relative,不然插件自带定位会扰乱布局,修改了自带的位置absolute为relative后,该滑动将不会生效

调用插件:

var Scroll = new iScroll('wrapper',{hScroll:true,vScroll:false, hScrollbar:false});

wrapper:元素id  //只有该元素下的第一个子元素才会滑动

hScroll:左右滑动

vScroll:上下滑动

hScrollbar:左右滑动条

vScrollbar:上下滑动条

转载于:https://www.cnblogs.com/SunSong/p/6958584.html

jQ 插件 iscroll.js相关推荐

  1. jq插件的基础知识,以及小demo

    什么是插件 ,jq插件,优点,缺点 ,未完待续- JQ插件就是用JQ代码编写的工具.就比如说我们用的模板,如EasyUi.我们只需要引入EasyUi的JS文件,然后调用它对应的方法,效果就出来了.实现 ...

  2. iscroll.js移动端滚动插件

    <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>is ...

  3. html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...

  4. xpage 传参_jQuery iScroll.js 移动端滚动条美化插件第1/5页

    demo: iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页 ...

  5. jq jqprint 设置页脚_jquery打印插件jqprint.js使用教程

    最近的项目要使用web前端打印,本来在网上搜索了一下采用的js:window.print()局部打印网页的方法,但是经过实际测试发现兼容性不好,无奈只好再找其他方法,终于被我找到了一款基于jquery ...

  6. iScroll.js 用法参考 (share)

    http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html http://www.nb88.net/Index/p/id/406 http: ...

  7. 全屏插件fullsizable.js失效???

    今天做个活动页需要全屏预览图片,用了插件fullsizable.js去写,结果不生效,看了文档发现也没有问题. 后面想着是不是我jq的版本用太高了,立刻成2.x的版本试了一下,果然是这个问题 o(´^ ...

  8. 日期插件rolldate.js的使用

    日期插件rolldate.js的使用 下载地址:http://www.jq22.com/jquery-info19834 效果: 代码: <!DOCTYPE html> <html ...

  9. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

最新文章

  1. 易语言---字符串操作
  2. html5电影在线看,HTML5-电影影评网
  3. boost源码剖析之:多重回调机制signal(上)
  4. Java Web项目运行流程
  5. 【POJ】2387 Til the Cows Come Home
  6. redis源码剖析(十四)—— dump.rdb文件分析工具
  7. Java虚拟机-第二篇-GC算法与内存分配策略
  8. python 漂亮界面demo_在这个什么都看脸的时代,如何用 GUI 提高 python 程序的颜值?...
  9. Android APK程序加密,防止被别人反编译
  10. SSH 远程连接服务慢的解决方案
  11. c语言单向循环链表实现增删,C语言单向非循环链表增删查改实现
  12. Kotlin 中文文档
  13. [转]字号、pt、px、inch、cm 之间的关系及对照表
  14. 11月4日绿健简报,星期五,农历十月十一
  15. 安全事件关联分析方法
  16. 2017年微商行业八大趋势
  17. SpringSecurity系列——会话管理,CSRFday8-1(源于官网5.7.2版本)
  18. MATLAB update出现未知错误unexpected error及Bundle#136 start failed的一种可能原因
  19. Docker学习--Docker镜像的管理操作
  20. 地理空间数据共享资源大汇总

热门文章

  1. Android为TV端助力 最详细的动画大全,包括如何在代码和在XML中使用
  2. matlab矩阵中如何去掉重复的行;如何找到相同的行,并找到其位置
  3. Android 开发中的View事件监听机制
  4. 【Irrlicht鬼火引擎】 安装配置Irrlicht鬼火引擎
  5. WinAPI: waveInGetNumDevs - 获取波形输入设备的数目
  6. Unity3D研究院之C#使用Socket与HTTP连接服务器传输数据包
  7. leetcode算法题--子集
  8. leetcode算法题--Perfect Squares
  9. leetcode算法题--回文数
  10. linux虚拟网络设备--虚拟机网卡和linux bridge上tap设备的关系(七)