首先,当div里面有滚动条的时候, 当两个div都有滚动条。并且需要同步滚动的时候,因为ios有滑动惯性和缓动的原因,会导致写了js同步滚动代码以后,会有抖动的问题。
一般解决方案就是加入一个标志位来。
下面是vue-easytable 里面的scroll-control-mixin.js 改造后的代码。
监听touchstart 来赋标志为true或者false。来解决同步滚动的问题。
exports.default = {
methods: {
body1Mousewheel: function body1Mousewheel(e) {
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
var e1 = e.originalEvent || window.event || e;
var scrollHeight = e1.wheelDelta || e1.detail * -1;
body2.scrollTop = body2.scrollTop - scrollHeight;
},
bodyScrollTop: function bodyScrollTop() {
var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
if (body1) {
body1.scrollTop = 0;
}
body2.scrollTop = 0;
},
body2Scroll: function body2Scroll(e) {
var view2 = this.$el.querySelector('.v-table-rightview');
var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
if (body1) {
body1.scrollTop = body2.scrollTop;
}
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
if (rightViewFooter && !scrollFlag) {
rightViewFooter.scrollLeft = body2.scrollLeft;
}
view2.querySelector('.v-table-header').scrollLeft = body2.scrollLeft;
},
rightViewFooterScroll: function rightViewFooterScroll() {
var view2 = this.$el.querySelector('.v-table-rightview');
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
view2.querySelector('.v-table-header').scrollLeft = rightViewFooter.scrollLeft;
if(scrollFlag){
view2.querySelector('.v-table-body').scrollLeft = rightViewFooter.scrollLeft;
}
},
rightViewFooterTouchstart: function rightViewFooterTouchstart(){
scrollFlag = true;
},
body2Touchstart: function body2Touchstart(){
scrollFlag = false;
},
scrollControl: function scrollControl() {
var _this = this;
this.unbindEvents();
setTimeout(function (x) {
var body1 = _this.$el.querySelector('.v-table-leftview .v-table-body');
var body2 = _this.$el.querySelector('.v-table-rightview .v-table-body');
var rightViewFooter = _this.$el.querySelector('.v-table-rightview .v-table-footer');
_utils2.default.bind(body1, 'mousewheel', _this.body1Mousewheel);
_utils2.default.bind(body2, 'scroll', _this.body2Scroll);
_utils2.default.bind(rightViewFooter, 'scroll', _this.rightViewFooterScroll);
_utils2.default.bind(rightViewFooter, 'touchstart', _this.rightViewFooterTouchstart);
_utils2.default.bind(body2, 'touchstart', _this.body2Touchstart);
});
},
unbindEvents: function unbindEvents() {
var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
_utils2.default.unbind(body1, 'mousewheel', this.body1Mousewheel);
_utils2.default.unbind(body2, 'scroll', this.body2Scroll);
_utils2.default.unbind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
},
scrollToTop: function scrollToTop() {
this.bodyScrollTop();
}
},
beforeDestroy: function beforeDestroy() {
this.unbindEvents();
}
};












网友评论