Fixed #6915 - Tabs: Scrollable tabs being skipped
parent
b1ece7953d
commit
ca7ccce0c1
|
@ -89,18 +89,24 @@ export default {
|
||||||
},
|
},
|
||||||
onPrevButtonClick() {
|
onPrevButtonClick() {
|
||||||
const content = this.$refs.content;
|
const content = this.$refs.content;
|
||||||
const width = getWidth(content);
|
const buttonWidths = this.getVisibleButtonWidths();
|
||||||
const pos = Math.abs(content.scrollLeft) - width;
|
const width = getWidth(content) - buttonWidths;
|
||||||
const scrollLeft = pos <= 0 ? 0 : pos;
|
const currentScrollLeft = Math.abs(content.scrollLeft);
|
||||||
|
const scrollStep = width * 0.8;
|
||||||
|
const targetScrollLeft = currentScrollLeft - scrollStep;
|
||||||
|
const scrollLeft = Math.max(targetScrollLeft, 0);
|
||||||
|
|
||||||
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
|
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
|
||||||
},
|
},
|
||||||
onNextButtonClick() {
|
onNextButtonClick() {
|
||||||
const content = this.$refs.content;
|
const content = this.$refs.content;
|
||||||
const width = getWidth(content) - this.getVisibleButtonWidths();
|
const buttonWidths = this.getVisibleButtonWidths();
|
||||||
const pos = width + Math.abs(content.scrollLeft);
|
const width = getWidth(content) - buttonWidths;
|
||||||
const lastPos = content.scrollWidth - width;
|
const currentScrollLeft = Math.abs(content.scrollLeft);
|
||||||
const scrollLeft = pos >= lastPos ? lastPos : pos;
|
const scrollStep = width * 0.8;
|
||||||
|
const targetScrollLeft = currentScrollLeft + scrollStep;
|
||||||
|
const maxScrollLeft = content.scrollWidth - width;
|
||||||
|
const scrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
|
||||||
|
|
||||||
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
|
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
|
||||||
},
|
},
|
||||||
|
@ -139,9 +145,14 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getVisibleButtonWidths() {
|
getVisibleButtonWidths() {
|
||||||
const { prevBtn, nextBtn } = this.$refs;
|
const { prevButton, nextButton } = this.$refs;
|
||||||
|
let width = 0;
|
||||||
|
|
||||||
return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
|
if (this.showNavigators) {
|
||||||
|
width = (prevButton?.offsetWidth || 0) + (nextButton?.offsetWidth || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return width;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
Loading…
Reference in New Issue