blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tabs): incorrect scrollspy position while inside a scroller

Browse Source
This commit is contained in:
chenjiahan 2020-02-29 15:57:20 +08:00
parent d9d85a7c72
commit 0993b394b1
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/tabs/index.js
View File

@ -300,12 +300,14 @@ export default createComponent({
scrollToCurrentContent() { scrollToCurrentContent() {
if (this.scrollspy) { if (this.scrollspy) {
this.clickedScroll = true; const target = this.children[this.currentIndex];
const instance = this.children[this.currentIndex]; const el = target?.$el;
const el = instance && instance.$el;
if (el) { if (el) {
const to = Math.ceil(getElementTop(el)) - this.scrollOffset; const to = getElementTop(el, this.scroller) - this.scrollOffset;
scrollTopTo(to, +this.duration, () => {
this.clickedScroll = true;
scrollTopTo(this.scroller, to, +this.duration, () => {
this.clickedScroll = false; this.clickedScroll = false;
}); });
} }

18
src/tabs/utils.ts
View File

@ -1,5 +1,5 @@
import { raf, cancelRaf } from '../utils/dom/raf'; import { raf, cancelRaf } from '../utils/dom/raf';
import { getRootScrollTop, setRootScrollTop } from '../utils/dom/scroll'; import { getScrollTop, setScrollTop } from '../utils/dom/scroll';
let scrollLeftRafId: number; let scrollLeftRafId: number;
@ -21,8 +21,14 @@ export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
animate(); animate();
} }
export function scrollTopTo(to: number, duration: number, cb: Function) { export function scrollTopTo(
let current = getRootScrollTop(); el: HTMLElement,
to: number,
duration: number,
callback: Function
) {
let current = getScrollTop(el);
const isDown = current < to; const isDown = current < to;
const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16); const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
const step = (to - current) / frames; const step = (to - current) / frames;
@ -34,12 +40,12 @@ export function scrollTopTo(to: number, duration: number, cb: Function) {
current = to; current = to;
} }
setRootScrollTop(current); setScrollTop(el, current);
if ((isDown && current < to) || (!isDown && current > to)) { if ((isDown && current < to) || (!isDown && current > to)) {
raf(animate); raf(animate);
} else { } else if (callback) {
cb && cb(); callback();
} }
} }

8
src/utils/dom/scroll.ts
View File

@ -65,12 +65,14 @@ export function setRootScrollTop(value: number) {
setScrollTop(document.body, value); setScrollTop(document.body, value);
} }
// get distance from element top to page top // get distance from element top to page top or scroller top
export function getElementTop(el: ScrollElement) { export function getElementTop(el: ScrollElement, scroller?: HTMLElement) {
if (isWindow(el)) { if (isWindow(el)) {
return 0; return 0;
} }
return el.getBoundingClientRect().top + getRootScrollTop();
const scrollTop = scroller ? getScrollTop(scroller) : getRootScrollTop();
return el.getBoundingClientRect().top + scrollTop;
} }
export function getVisibleHeight(el: ScrollElement) { export function getVisibleHeight(el: ScrollElement) {