Skip to content

Commit

Permalink
fix smoothscroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@ali322
ali322 committed Apr 1, 2016
1 parent 90c1622 commit b1f7c3e
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 44 deletions.
37 changes: 37 additions & 0 deletions src/lib/dom/browserDetector.es6
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
'use strict';
export function browserVersion(){
var u = window.navigator.userAgent, app = window.navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}

export function browserLang(){
return (window.navigator.browserLanguage || window.navigator.language).toLowerCase()
}

export function isAndroid(){
var appVersion = window.navigator.appVersion;
// Android browser is not a chrome browser.
if (/Android/.test(appVersion) && !(/Chrome\/\d/.test(appVersion))) {
var safariVersion = appVersion.match(/Safari\/(\d+.\d)/);
if(safariVersion && typeof safariVersion === "object" && safariVersion.length >= 2) {
return parseFloat(safariVersion[1]) < 535.19;
} else {
return true;
}
} else {
return false;
}
}
87 changes: 43 additions & 44 deletions src/lib/dom/smoothscroll.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function SmoothScroll(el,options){
bounceTime: 600,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
probeType:2,
HWCompositing:true,
}
this.style = {
transform:prefixedStyle("transform"),
Expand All @@ -56,6 +57,7 @@ function SmoothScroll(el,options){
transformOrigin:prefixedStyle("transformOrigin")
}
this.options = Object.assign({},this.options,options)
this.translateZ = this.options.HWCompositing?' translateZ(0)':""
if (this.options.probeType == 3) {
this.options.useTransition = false;
}
Expand All @@ -72,14 +74,9 @@ function SmoothScroll(el,options){

SmoothScroll.prototype = {
_init(){
this.refresh()
this.toggleEvents()
if(this.options.snap){
this._initSnap()
}
},
_transitionEnd(e){
// console.log('transitionend')
if(e.target !== this.scroller){
return
}
Expand All @@ -90,13 +87,10 @@ SmoothScroll.prototype = {
}
},
_move(e){
if(!this.enable){
if(!this.enable || eventType[e.type] !== this.initiated){
return
}
e.preventDefault()
// if(eventType[e.type] != this.initiated){
// return
// }
const point = e.touches?e.touches[0]:e.pos
let deltaX = point.pageX - this.pointX
let deltaY = point.pageY - this.pointY
Expand All @@ -107,7 +101,7 @@ SmoothScroll.prototype = {
const absDistX = Math.abs(this.distX)
const absDistY = Math.abs(this.distY)
const timestamp = Date.now()
if(timestamp - this.endTime > 100 && (absDistY < 5 && absDistX < 5)){
if(timestamp - this.endTime > 300 && (absDistY < 10 && absDistX < 10)){
return
}
if(this.directionLocked == 0){
Expand All @@ -119,7 +113,6 @@ SmoothScroll.prototype = {
this.directionLocked = "n"
}
}
// console.log(absDistX,absDistY)
// console.log('directionLocked',this.directionLocked)
if(this.directionLocked == "h"){
if(this.options.hasHorizontalScroll){
Expand Down Expand Up @@ -152,9 +145,9 @@ SmoothScroll.prototype = {
if(!this.moved){
this._triggerEvent("scrollStart")
}
this._translate(newX,newY)
this.moved = true
this.directionLocked = 0
this._translate(newX,newY)
// this.directionLocked = 0
if(timestamp - this.startTime > 300){
this.startTime = timestamp
this.startX = this.x
Expand All @@ -168,26 +161,19 @@ SmoothScroll.prototype = {
}
},
_start(e){
if(!this.enable){
if(!this.enable || (this.initiated && eventType[e.type] !== this.initiated)){
return
}
if(!isAndroid() && isPreventDefaultException(e.target,this.options.preventDefaultException)){
if(!isAndroid() && !isPreventDefaultException(e.target,this.options.preventDefaultException)){
e.preventDefault()
}
// if(this.initiated && eventType[e.type] != this.initiated){
// return
// }
const point = e.touches?e.touches[0]:e.pos
const point = e.touches?e.touches[0]:e
this.initiated = eventType[e.type]
this.moved = false
this.distX = 0;
this.distY = 0;
this.pointX = point.pageX
this.pointY = point.pageY
this.startX = this.x
this.startY = this.y
this.startTime = Date.now()
this.directionLocked = 0
this.moved = false
this.initiated = eventType[e.type]
this.startTime = Date.now()
if(this.isInTransition && this.options.useTransition){
this._transitionTime()
this.isInTransition = false
Expand All @@ -198,25 +184,26 @@ SmoothScroll.prototype = {
this.isAnimating = false
this._triggerEvent("scrollEnd")
}
this.pointX = point.pageX
this.pointY = point.pageY
this.startX = this.x
this.startY = this.y
this._triggerEvent("beforeScrollStart")
},
_end(e){
if(!this.enable){
if(!this.enable || eventType[e.type] !== this.initiated){
return
}
// if(eventType[e.type] != this.initiated){
// return
// }

if(!isPreventDefaultException(e.target,this.options.preventDefaultException)){
e.preventDefault()
}
const point = e.touches?e.touches[0]:e.pos
const point = e.touches?e.touches[0]:e
let newX = Math.round(this.x)
let newY = Math.round(this.y)
this.endTime = Date.now()
this.isInTransition = 0
// this.initiated = 0
this.initiated = 0
this.endTime = Date.now()
if(this.resetPosition(this.options.bounceTime)){
return
}
Expand All @@ -241,7 +228,11 @@ SmoothScroll.prototype = {
this.isInTransition = 1
}
if(newX != this.x || newY != this.y){
this.scrollTo(newX,newY,time,timingfunction.quadratic)
let easing = ""
if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
easing = timingfunction.quadratic;
}
this.scrollTo(newX,newY,time,easing)
return
}
this._triggerEvent("scrollEnd")
Expand Down Expand Up @@ -270,13 +261,13 @@ SmoothScroll.prototype = {
disable(){
this.enable = false
},
scrollTo(x,y,time,easing = timingfunction.circular){
scrollTo(x,y,time,easing){
easing = easing || timingfunction.circular
this.isInTransition = this.options.useTransition && time > 0
const transitionType = this.options.useTransition && easing.style
if(!time){
if(!time || this.options.useTransition){
const transitionType = this.options.useTransition && easing.style
if(transitionType){
this.scrollerStyle[prefixedStyle("transitionTimingFunction")] = easing.style
// this._transitionTimingFunction(easing.style)
this._transitionTime(time)
}
this._translate(x,y)
Expand All @@ -290,12 +281,14 @@ SmoothScroll.prototype = {
this.scrollTo(x,y,time)
},
getComputedPosition(){
var matrix = window.getComputedStyle(this.scroller,null);
var x,y
matrix = matrix[this.style.transform].split(")")[0].split(", ")
var matrix = window.getComputedStyle(this.scroller, null),
x, y;

matrix = matrix[prefixedStyle("transform")].split(')')[0].split(', ');
x = +(matrix[12] || matrix[4]);
y = +(matrix[13] || matrix[5]);
return {x,y}

return { x: x, y: y };
},
_transitionTime(time = 0){
let transitionDuration = this.style.transitionDuration
Expand All @@ -311,7 +304,7 @@ SmoothScroll.prototype = {
}
},
_translate(x,y){
this.scrollerStyle[this.style.transform] = `translate3D(${x}px,${y}px,0)`
this.scrollerStyle[this.style.transform] = `translate(${x}px,${y}px)${this.translateZ}`
this.x = x
this.y = y
},
Expand Down Expand Up @@ -368,7 +361,7 @@ SmoothScroll.prototype = {
}
this.endTime = 0
this._triggerEvent("refresh")
this.resetPosition()
// this.resetPosition()
},
destory(){
this.toggleEvents(true)
Expand All @@ -386,6 +379,12 @@ SmoothScroll.prototype = {
toggler(this.scroller,"webkitTransitionEnd",this._transitionEnd.bind(this))
toggler(window,"orientationchange",this._resize.bind(this))
toggler(window,"resize",this._resize.bind(this))
toggler(target,"click",()=>{
if ( this.enabled && !e._constructed ) {
e.preventDefault();
e.stopPropagation();
}
})
},
on(type,callback){
if(!this._events[type]){
Expand Down

0 comments on commit b1f7c3e

Please sign in to comment.