美文网首页
javascript scroll函数

javascript scroll函数

作者: leleo | 来源:发表于2019-07-09 14:53 被阅读0次

// 滚动时的变化

function customScroll(obj) {
  var scrObj = obj;
  var perScrollTop = 0;

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();

    if (perScrollTop < scrollTop && perScrollTop - scrollTop <= -3 && scrObj.scrollDown !== undefined) {
      // 向下
      scrObj.scrollDown();
    }
    if (perScrollTop > scrollTop && perScrollTop - scrollTop >= 3 && scrObj.scrollUp !== undefined) {
      // 向上
      scrObj.scrollUp();
    }
    if (scrollTop > scrObj.data.topScrollPosition ? scrObj.data.topScrollPosition : null && scrObj.topScrollPosition !== undefined) {
      // 头部开始向下滚动到指定位置触发此函数
      scrObj.topScrollPosition();
    }
    if (scrollTop > scrObj.data.topHidePosition ? scrObj.data.topHidePosition : null && scrObj.topHidePosition !== undefined) {
      // 底部开始向上滚动到指定位置触发此函数
      scrObj.topHidePosition();
    }
    perScrollTop = scrollTop;
  }).on("resize.scroll", function() {
    // 屏幕变化
    scrObj.resizeScroll();
  });
}

// 调用方式
var scroll = new customScroll({
  'data': {
    'topScrollPosition': 600,
    'bottomScrollPosition': 600
  },
  'scrollDown': function() {
    console.log('向下')
  },
  'scrollUp': function() {
    console.log('向上')
  },
  'topScrollPosition': function() {
    console.log('头部开始向下滚动到指定位置触发此函数')
  },
  'bottomScrollPosition': function() {
    console.log('底部开始向上滚动到指定位置触发此函数')
  },
  'resizeScroll': function() {
    console.log('屏幕变化');
  }
});

相关文章

网友评论

      本文标题:javascript scroll函数

      本文链接:https://www.haomeiwen.com/subject/pymxkctx.html