chjtx / JRoll

Smooth scrolling for the mobile web
http://www.chjtx.com/JRoll/
MIT License
460 stars 91 forks source link

很不错,可是能不能回弹的时候也响应scroll事件 #42

Closed ben-lau closed 7 years ago

ben-lau commented 7 years ago

scroll事件似乎不会在回弹的时候触发

chjtx commented 7 years ago

是的,不会

ben-lau commented 7 years ago

我觉得可以加上 不然做表格固定列的时候无法对齐了

chjtx commented 7 years ago

我也做过表头固定的项目,把bounce设为false就好了

ben-lau commented 7 years ago

对啊我目前是没用回弹不过我觉得有还是好的,还有滚动时能不能抛出滚动方向呢

chjtx commented 7 years ago

滚动方向是有的,你在console输出jroll对象查看一下就知道了,例如:

jroll.on('scroll', function(){
  console.log(this)
})

-1和1表示正向还是负向看看源码的注释,回弹实现滚动事件比较麻烦,还有很多其它事情要做,就懒得搞它

ben-lau commented 7 years ago

额我看了看 我发现scroll对象里_s属性里有endX,endY,startX,startY,lastX,lastY,代表是什么呢 我能根据这个判断当前滚动的方向么,因为directionX和directionY有默认值-1,我无法用这个判断当前方向

chjtx commented 7 years ago

用directionX和directionY来判断,默认值没关系,在on('scroll')时会改变的

ben-lau commented 7 years ago

没啊 我要做个横向滑动时阻止嵌套层的纵向滑动,我必须知道当前滑动方向那个值更大点

而且还有个问题,我在做嵌套滑动时,外层需要滑到底部才能到里层滑动,可是触摸里层滑动时,里层总会动一下才委托给外层,用的call api 是不是触发的时机不够快呢

chjtx commented 7 years ago

你判断的方式不对吧,你可以在runjs写个demo,帮你看看问题

ben-lau commented 7 years ago

http://runjs.cn/code/eqctzdwj 麻烦你了

chjtx commented 7 years ago
me.scrollTo(me.x, me.y, 0, me.options.bounce, null, true, (e.touches || [e]))
me._execEvent('scroll', e)

这是jroll里面的源码,scrollTo和execEvent是都会执行的,所以会滑动一小块距离才切换到外层

可以转个思路,监听外层,call内层 http://runjs.cn/detail/jinnj9vo

我将你监听内层的代码换成了这个,如果外层start和scroll时y值都没变化就调用内层

      innerScroll.disable()
      mainScroll.on("scrollStart", function (e) {
        this.cacheY = this.y
      })
      mainScroll.on("scroll", function (e) {
        if (this.cacheY === this.y) {
          this.call(innerScroll, e)
        }
      })

disable只会禁止手/鼠标触发滑动,禁止不了js去触发滑动的

ben-lau commented 7 years ago

你这个思路我倒是试过,可是我的innerScroll其实是可以左右滑动的,我的项目里 innerScroll里是个固定头的表格,其实有两个scroll 一个是固定的y轴 一个是body 如果disable了 那就无法x轴滑动了 main的scroll是无法左右滑的

chjtx commented 7 years ago

我给你发的例子可以左右滑的呀

ben-lau commented 7 years ago

但是里层不能往上滑的?

ben-lau commented 7 years ago

其实可以减少那个最小距离 或者让惯性滑动也能传递到下一个层也可以

chjtx commented 7 years ago

里层也可以往上滑啊,我的demo是可以的。

ben-lau commented 7 years ago

我的意思是 里层的顶部不能到达外层的顶部 本来是可以的

ben-lau commented 7 years ago

这个是手机页面来的 用鼠标拖动事件别用滚轮

chjtx commented 7 years ago

我是用谷歌模拟手机的开发工具的

ben-lau commented 7 years ago

image 就是,他能先让外层上去再滑动内层的啊

chjtx commented 7 years ago

我的demo也是可以的呀,如果你手势稍微不是垂直就滑内层,垂直就是滑外层的,你多滑几次试试

ben-lau commented 7 years ago

好吧看到了 禁止内层滚动的话我这边的业务就无法完成了 不过还是个不错的组件 比很多滚动的性能高 不过可以考虑加入beforeScroll事件 就发生在滚动之前 手指完成滑动的时候 有所有的滑动参数可是container并没有scroll的时机 这样可以在这里转换委托 谢谢