本文是抽屉组件在PC端滚动鼠标中键、手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器。

演示在:www.jgui.com

Github地址:https://github.com/zhaogaojian/JGUI

效果

觉得好的给个star,谢谢!

源码未压缩,请右键查看网页源码,相关文件有accordion.js,accordion.css,index.html

隐藏滚动条可以通过设置margin隐藏滚动条方式实现,css3支持直接隐藏滚动条,这两种方式实现简单,网上也有很多文章

本文使用监听鼠标滚动事件滚动方式。

下面是实现过程和思路,大家可以一起来学习下使用到的技术。

前端html结构如下

<div class="jgui-accordion"
style="width:100%;overflow:hidden;position: absolute;top:60px;left:0px;right: 0px;bottom:0px;">
<div class="jgui-accordion-list">
<ul>
<dl>
<dt class="jgui-accordion-navitem">
<a>
<i class="anticon icon-home"></i>
<span>目录1</span>
<i class="jgui-accordion-navitem-more"></i>
</a>
</dt>
.......

方法一:使用jquery animate实现(只处理垂直方向上滚动)

//电脑端中键滚动事件
mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
console.log(delta);
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
});
var handle = function (delta) {
var step = Math.floor($('.jgui-accordion').height()/10); //可视区高度
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
var direction = delta > 0 ? -1 : 1;
$(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, 50);
}
//手机端鼠标滑动事件
$(".jgui-accordion").on("touchstart", function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
}); $(".jgui-accordion").on("touchmove", function (e) { e.preventDefault();
moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = (moveEndY - startY);
startY = moveEndY;
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
$(".jgui-accordion").stop().animate({ scrollTop: -Y + cur_top }, 0); });

方法二:使用css3 tansform实现,以手机端滑动为例

//手机端鼠标滑动事件
$(".jgui-accordion-list").on("touchstart", function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
console.log("aa");
});
curY=0;
$(".jgui-accordion-list").on("touchmove", function (e) {
  e.preventDefault();
moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = (moveEndY - startY) ;
curY+=Y;
startY = moveEndY;
$(".jgui-accordion-list").css('-webkit-transform','translate3d(0px,'+curY+'px,0px)')
$(".jgui-accordion-list").css('-moz-transform','translate3d(0px,'+curY+'px,0px)')
});

在本页面中,两种方式性能基本上差不多,第二种需要手动计算滚动区域,防止过高或过低。

PC端模拟手机滑动效果如下

滚动时,会发现缺少了一点惯性,比如鼠标中键一次拨动几个和拨动一个应该移动距离不一样,为了解决这个问题改进代码如下

//电脑端中键滚动事件
var sumdelta=;
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = ;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / ;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / ;
}
if (delta)
{
sumdelta+=(delta> ? - : );
setTimeout("handle()",);
}
stopPropagation(event);
});
var handle = function () {
isanimate=true;
var step = Math.floor($('.jgui-accordion').height()/);//可视区高度
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
var direction = sumdelta ;//> 0 ? -1 : 1;
$(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, ,'swing',function(){sumdelta=;}); }

上面通过setTimeout延时触发滚动事件,即可实现不同的滚动速度,因为鼠标中键滚动只有一个mousewheel不像左右键那样有按下,移动,松开事件,所以需要借助定时器。

测试发现突然变向滑动时,会感觉有延迟,分析代码原因主要是因为sumdelta=0,这时候可能正在进行的滚动操作被重置了,另外部分变量使用的全局变量也不合适,因为界面上可能有多个accordion,

下面增加一个Jquery对象变量,优化代码如下:

//电脑端中键滚动事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
if (delta)
{
var datas=$(this).data('datas');
datas.sumdelta+=(delta> 0 ? -1 : 1);
var direction = datas.sumdelta ;
var obj=$(this);
var handle = function () {
datas.sumdelta=0;
var step = Math.floor(obj.height()/10);//可视区高度
var cur_top = obj.scrollTop(); //当前滚过的高度
obj.stop().animate({ scrollTop: direction * step + cur_top }, 400,'linear',function(){direction=0;}); }
setTimeout(handle,100);
}
stopPropagation(event);
});

datas.sumdelta是自定义的一个Jquery对象变量,增加变量方法如下(return this.each是一个链式操作,返回的是this)。

$.fn.jAccordion = function (p_options,p_datas, p_param) {
return this.each(function () {
var obj = $(this);
var datas = $.extend({
sumdelta:0
}, p_datas);
obj.data('datas', datas);
});
};
$(".jgui-accordion").jAccordion();

为了进一步提升滚轮加速效果和防止Timer重入再次修改代码如下

//电脑端中键滚动事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
if (delta)
{
var datas=$(this).data('datas');
datas.sumdelta+=(delta> 0 ? -1 : 1);
var direction = datas.sumdelta ;
var obj=$(this);
var handle = function () {
datas.isscrolling=true;
datas.sumdelta=0;
var step = Math.floor(obj.height()/30);//可视区高度
var cur_top = obj.scrollTop(); //当前滚过的高度
obj.stop().animate({ scrollTop: direction*Math.abs(direction) * step + cur_top }, 400,'linear',function(){direction=0;datas.isscrolling=false}); }
if(!datas.isscrolling)
setTimeout(handle,100);
}
stopPropagation(event);
});
$.fn.jAccordion = function (p_options,p_datas, p_param) {
return this.each(function () {
var obj = $(this);
var datas = $.extend({
sumdelta:0,isscrolling:false
}, p_datas);
obj.data('datas', datas);
});
};
$(".jgui-accordion").jAccordion();

这样在拨动一两格时,滚动条缓慢移动,当快速波动时,因为平方的效应,能引起加速滚动,可以快速的回到顶部或者底部。如果不想使用这个滚动条代码,将mousewheel事件注释掉即可。

现在鼠标上下滚动很平滑了,也可以快慢滚动了,同理,手机端touch事件也可以根据这个原理改造,需要考虑滑动时间和滑动距离,根据这个来计算滑动偏移距离,手机端效果将后续实现。大家如果有空深入完善下,应该也是可以媲美IScroll的。后续将扩展一些JS防范方便大家使用。

后续:继续优化中键滚动 

https://www.cnblogs.com/zhaogaojian/p/10436234.html

JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)的更多相关文章

  1. JGUI源码:鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...

  2. JGUI源码:从头开始,建一个自己的UI框架(1)

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  3. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  4. 实例源码--Android图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  5. JGUI源码:JS菜单动态绑定(8)

    我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J ...

  6. JGUI源码:Tab组件实现(9)

    程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...

  7. Android Xlistview的源码浅度分析 监听ListView上下滑动 以及是否到顶和底部

    如转载 请注明出处 http://blog.csdn.net/sk719887916 比如我们很多项目中会用到listview 并且要对listview滑动方向进行判断 也有需要的到listview是 ...

  8. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  9. JGUI源码:Accordion折叠到侧边栏实现(6)

    折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = ...

随机推荐

  1. RabbitMQ基本示例,轮询机制,no_ack作用

    一.RabbitMQ简介: ''' RabbitMQ就是消息队列 之前不是学了Queue了吗,都是队列还学RabbitMQ干嘛? 干的事情是一样的 Python的Queue有两个, 一个线程Queue ...

  2. java.io.IOException: There appears to be a gap in the edit log. We expected txid ***, but got txid

    方式1 原因:namenode元数据被破坏,需要修复解决:恢复一下namenode hadoop namenode -recover 一路选择Y,一般就OK了 方式2 Need to copy the ...

  3. vue 路由变化页面数据不刷新问题(缓存)

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...

  4. lsof -i

    https://www.cnblogs.com/sparkbj/p/7161669.html 主要命令

  5. 【转】Android 增,删,改,查 通讯录中的联系人

    一.权限 操作通讯录必须在AndroidManifest.xml中先添加2个权限, <uses-permission android:name="android.permission. ...

  6. 使用PowerDesigner 15对现有数据库进行生成图表结构

    PowerDesigner的安装和基本使用,我就不阐述了.大家可以到这里看看:http://www.blogjava.net/wangdetian168/archive/2011/04/07/Powe ...

  7. python小白——进阶之路——day2天-———变量的缓存机制+自动类型转换

    # ###同一文件,变量的缓存机制 ''' -->Number 部分 1.对于整型而言,-5~正无穷范围内的相同值 id一致 2.对于浮点数而言,非负数范围内的相同值 id一致 3.布尔值而言, ...

  8. .net core2.1 三层中使用Autofac代替原来Ioc

    首先,现有的三层项目的结构 其中  Repository public interface IPersonRepository { string Eat(); } public class Perso ...

  9. 小程序——返回上个页面触发事件(onUnload)

    //页面销毁前--上传被提交的数据 onUnload:function(){ var _this=this; let updateStatus = wx.getStorageSync('UpdateS ...

  10. linux系统安装redis

    redis的下载安装教程 1.进入到linux指定目录中 cd /usr/local        路径看你自己情况 2.下载redis,执行如下命令: wget http://download.re ...