判断页面高度是否超出 超出调用滚动

77 阅读1分钟
//判断页面高度是否超出 超出调用滚动
setTableScroll: function () {
    var outHeight = $('.content_list')[0].offsetHeight;
    var contentHeight = $('.content_scroll-height')[0].offsetHeight;
    if (contentHeight > outHeight) {
        var self = this;
        this.JqsbList = this.JqsbList.concat(this.JqsbList);//合并数据源,首尾相接
        setTimeout(function () {
            self.scrollContentDom = document
                .getElementsByClassName('content_list') 
                .item(0);//content_list为外层 需要指定高度
            self.tableDom = document
                .getElementsByClassName('content_scroll-height')
                .item(0);
            //执行函数
            self.roll(50);
        }, 10);
    }
},
//滚动函数
roll: function (t) {
    var self = this;
    var timer = setInterval(this.rollStart, t); // 间隔时间t
    // 鼠标移入table时暂停滚动
    self.tableDom.onmouseover = function () {
        clearInterval(timer);
    };
    // 鼠标移出table后继续滚动
    self.tableDom.onmouseout = function () {
        timer = setInterval(self.rollStart, t);
    };
},

// 开始滚动函数
rollStart: function () {
    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
    if (
        this.scrollContentDom.scrollTop >=
        this.scrollContentDom.scrollHeight / 2
    ) {
        //注此处高度相当于为俩个tbody高度 需除2
        this.scrollContentDom.scrollTop = 0;
    } else {
        this.scrollContentDom.scrollTop++;
    }
},
//或者使用css注册滚动动画:
@keyframes scrollTop {
    0% {
        transform: translateY(30px);
    }
    100% {
        transform: translateY(calc(-100% + 510px));
    }
}
.content_scroll {
    -webkit-animation: 15s scrollTop linear infinite normal;
    animation: 15s scrollTop linear infinite normal;
}
.content_scroll:hover {
    animation-play-state: paused;
}