欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

iScroll.js 手机 上下左右菜单滑动 问题

(元素模板) / 2017-01-04 17:42
iScroll.js 手机 上下左右菜单滑动 问题

首先下载下载iScroll.js

百度搜索iScroll.js,或者从这里下载http://pan.baidu.com/s/1bntS73x

第一:引入  iscroll.js,这个不用多说把

第二:主要代码:
 

编写规范的html格式

只有如下格式才能实现滑动效果

<div id="wrapper">

    <div class="scroll">

       这个区域可以滑动

    </div>

</div>

如下格式不能滑动

<div id="wrapper">

       <div class="other">这个区域可以滑动</div>   

      <div class="scroll">

       这个区域不可以滑动了

        </div>

</div>

只有wrapper的第一个子元素才能实现滑动效果。

第三:JS主要代码:
 

编写js调用代码

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

此处 测试是上下滑动的代码

第一参数必需是滑动元素的父元素的id。

主要参数一览:

hScroll: true, 左右滑动,默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条,默认为显示

vScrollbar: true,是否显示X轴滚动条,默认为显示




这个代码 我测试过 ,主要问题在,往上滑动后,无法显示下拉部分,只要在滑动的代码 处加上显示高度,一般为 整体的一半即可,
 

<div id="wrapper">

       <div class="other">这个区域可以滑动</div>   

      <div class="scroll">

       这个区域不可以滑动了

        </div>

</div>

比如这里 滑动的部分 是other,那么这里的CSS就加上 高度css 即可。


Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com