iscroll5 滚动条根据内容高度自动显示隐藏及强制横屏时方向错位
横竖屏方向错位:
move: function (e) {
if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
return;
}
if ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
e.preventDefault();
}
var point = e.touches ? e.touches[0] : e,
deltaX = point.pageX - this.pointX,
deltaY = point.pageY - this.pointY,
timestamp = utils.getTime(),
newX, newY,
absDistX, absDistY;
this.pointX = point.pageX;
this.pointY = point.pageY;
this.distX += deltaX;
this.distY += deltaY;
absDistX = Math.abs(this.distX);
absDistY = Math.abs(this.distY);
// We need to move at least 10 pixels for the scrolling to initiate
if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
return;
}
// If you are scrolling in one direction lock the other
if ( !this.directionLocked && !this.options.freeScroll ) {
if ( absDistX > absDistY + this.options.directionLockThreshold ) {
this.directionLocked = 'h'; // lock horizontally
} else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
this.directionLocked = 'v'; // lock vertically
} else {
this.directionLocked = 'n'; // no lock
}
}
if ( this.directionLocked == 'h' ) {
if ( this.options.eventPassthrough == 'vertical' ) {
e.preventDefault();
} else if ( this.options.eventPassthrough == 'horizontal' ) {
this.initiated = false;
return;
}
deltaY = 0;
} else if ( this.directionLocked == 'v' ) {
if ( this.options.eventPassthrough == 'horizontal' ) {
e.preventDefault();
} else if ( this.options.eventPassthrough == 'vertical' ) {
this.initiated = false;
return;
}
deltaX = 0;
}
if(this.options.isReverse){
let oldDeltaX = deltaX;
let oldDeltaY = deltaY;
deltaX = this.hasHorizontalScroll ? oldDeltaY : 0;
deltaY = this.hasVerticalScroll ? -oldDeltaX : 0;
}else{
deltaX = this.hasHorizontalScroll ? deltaX : 0;
deltaY = this.hasVerticalScroll ? deltaY : 0;
}
newX = this.x + deltaX;
newY = this.y + deltaY;
// Slow down if outside of the boundaries
if ( newX > 0 || newX < this.maxScrollX ) {
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
}
if ( newY > 0 || newY < this.maxScrollY ) {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
if ( !this.moved ) {
this._execEvent('scrollStart');
}
this.moved = true;
this._translate(newX, newY);
/* REPLACE START: _move */
if ( timestamp - this.startTime > 300 ) {
this.startTime = timestamp;
this.startX = this.x;
this.startY = this.y;
}
/* REPLACE END: _move */
}
根据内容自动显示隐藏滚动条:
refresh: function () {
this.transitionTime();
if ( this.options.listenX && !this.options.listenY ) {
// this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
this.wrapper.style.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
} else if ( this.options.listenY && !this.options.listenX ) {
// this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
this.wrapper.style.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
} else {
this.wrapper.style.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
// this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
}
if ( this.scroller.hasHorizontalScroll && this.scroller.hasVerticalScroll ) {
utils.addClass(this.wrapper, 'iScrollBothScrollbars');
utils.removeClass(this.wrapper, 'iScrollLoneScrollbar');
if ( this.options.defaultScrollbars && this.options.customStyle ) {
if ( this.options.listenX ) {
this.wrapper.style.right = '8px';
} else {
this.wrapper.style.bottom = '8px';
}
}
} else {
utils.removeClass(this.wrapper, 'iScrollBothScrollbars');
utils.addClass(this.wrapper, 'iScrollLoneScrollbar');
if ( this.options.defaultScrollbars && this.options.customStyle ) {
if ( this.options.listenX ) {
this.wrapper.style.right = '2px';
} else {
this.wrapper.style.bottom = '2px';
}
}
}
var r = this.wrapper.offsetHeight; // force refresh
if ( this.options.listenX ) {
this.wrapperWidth = this.wrapper.clientWidth;
if ( this.options.resize ) {
this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8);
this.indicatorStyle.width = this.indicatorWidth + 'px';
} else {
this.indicatorWidth = this.indicator.clientWidth;
}
this.maxPosX = this.wrapperWidth - this.indicatorWidth;
if ( this.options.shrink == 'clip' ) {
this.minBoundaryX = -this.indicatorWidth + 8;
this.maxBoundaryX = this.wrapperWidth - 8;
} else {
this.minBoundaryX = 0;
this.maxBoundaryX = this.maxPosX;
}
this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX));
}
if ( this.options.listenY ) {
this.wrapperHeight = this.wrapper.clientHeight;
if ( this.options.resize ) {
this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8);
this.indicatorStyle.height = this.indicatorHeight + 'px';
} else {
this.indicatorHeight = this.indicator.clientHeight;
}
this.maxPosY = this.wrapperHeight - this.indicatorHeight;
if ( this.options.shrink == 'clip' ) {
this.minBoundaryY = -this.indicatorHeight + 8;
this.maxBoundaryY = this.wrapperHeight - 8;
} else {
this.minBoundaryY = 0;
this.maxBoundaryY = this.maxPosY;
}
this.maxPosY = this.wrapperHeight - this.indicatorHeight;
this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY));
}
this.updatePosition();
}
iscroll5 滚动条根据内容高度自动显示隐藏及强制横屏时方向错位的更多相关文章
- 自动显示隐藏布局的listView
借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示 ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
- css 始终显示滚动条,内容超出显示有滑块的滚动条,内容没有超出显示空的滚动条
1.内容没有超出显示空的滚动条 <div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .di ...
- 使用事件捕获实时捕获img是否加载完毕, 实现iframe内容高度自动适应
如何判断在html中图片加载完毕呢? 给img图片加onload事件呗. 如何判断一个界面中所有的图片加载完毕呢? 给所有的图片加上onload事件呗. 如果有1000张图片那要怎么绑定事件呢? 我们 ...
- 点击自动显示/隐藏DIV代码。(简单实用)
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...
- 让Dock自动 显示/隐藏 不再有延迟
Safari 5.2 Mac OS X 10.7.2 <ignore_js_op> 可能很多朋友使用Mac的时候都会选择将Dock隐藏(可以在系统偏好设置-Dock中选择),等到使用的时候 ...
- 对于单文本或者div的内容怎么在显示东西过多的情况下实现显示隐藏
js代码: $(function () { var o = document.getElementById("newsdetail_ArticleContent"); Subt(o ...
- 让动态的 iframe 内容高度自适应
使用iframe加载其他页面的时候,需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1. 没有设置高度 <div class="iframe-wrapp ...
- jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容
实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...
随机推荐
- I帧B帧P帧
转载自:http://blog.csdn.net/abcjennifer/article/details/6577934 视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容 ...
- JUC---02
目录 1.1 集合安全问题 1.1.1 ListNotSafe 1.1.2 MapNotSafe 1.1.3 SetNotSafe 1.1 集合安全问题 1.1.1 ListNotSafe 首先看一个 ...
- swagger2配置详解
1.写在controller上的注解 1.1 @Api 代码 @Api(tags = "用户相关接口", description = "提供用户相关的 Rest API& ...
- 计算机网络-网络层(1)IPv4和IPv6
IPv4数据报格式: 版本号 这4比特规定了数据报的IP 协议版本.通过查看版本号,路由器能够确定如何解释IP数据报的剩余部分. 首部长度 以4字节为单位,没有选项的首部长度为5*4=20字节 服务类 ...
- Intelligence Beyond the Edge: Inference on Intermittent Embedded Systems
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 以下是对本文关键部分的摘抄翻译,详情请参见原文. Abstract 能量收集技术为未来的物联网应用提供了一个很有前景的平台.然而,由于这些 ...
- 3、Entity Framework Core 3.1入门教程-设定字段属性
本文章是根据 微软MVP solenovex(杨旭)老师的视频教程编写而来,再加上自己的一些理解. 视频教程地址:https://www.bilibili.com/video/BV1xa4y1v7rR ...
- 修改注册表修改环境变量PATH
因公司办公电脑做了权限设置,不能通过右击“我的电脑”-属性的方式更改环境变量值 摸索找到了通过修改注册表的方式修改PATH值 Win+R 输入regedit打开册表编辑器 HKEY_LOCAL_M ...
- openCV - 2. 矩阵的掩膜操作
获取图像像素指针.掩膜操作解释 获取图像像素指针 CV_Assert(myImage.depth() == CV_8U); Mat.ptr<uchar>(int i=0) 获取像素矩阵的指 ...
- FileZilla Server FTP服务器失败
使用Filezilla Server配置FTP服务器https://blog.csdn.net/chuyouyinghe/article/details/78998527 FileZilla Serv ...
- Python画图库Turtle库详解篇
Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...