fix: qych 内部滚动面板与整页翻屏不再冲突
新增 _isInsideScrollablePanel: wheel事件源在content-item1内时, 检查面板自身是否还能滚动。能滚→交给浏览器,不能→触发整页翻屏。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
aada2a8b2b
commit
a399a483f0
@ -471,6 +471,21 @@ export default {
|
|||||||
this.setNavActive(sectionIndex - 1);
|
this.setNavActive(sectionIndex - 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
/** 检查事件源是否在可滚动面板内,且面板仍有滚动空间 */
|
||||||
|
_isInsideScrollablePanel(e, direction) {
|
||||||
|
let el = e.target;
|
||||||
|
while (el) {
|
||||||
|
if (el.classList && el.classList.contains('content-item1')) {
|
||||||
|
const atTop = el.scrollTop <= 1;
|
||||||
|
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
|
||||||
|
if (direction > 0 && !atBottom) return true; // 向下滚,面板未到底
|
||||||
|
if (direction < 0 && !atTop) return true; // 向上滚,面板未到顶
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
el = el.parentElement;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
handleWheel(e) {
|
handleWheel(e) {
|
||||||
if (this.isScrolling) return;
|
if (this.isScrolling) return;
|
||||||
const delta = Math.abs(e.deltaY);
|
const delta = Math.abs(e.deltaY);
|
||||||
@ -480,6 +495,12 @@ export default {
|
|||||||
if (!scrollRoot) return;
|
if (!scrollRoot) return;
|
||||||
|
|
||||||
const direction = e.deltaY > 0 ? 1 : -1;
|
const direction = e.deltaY > 0 ? 1 : -1;
|
||||||
|
|
||||||
|
// 如果事件来自内部滚动面板且面板还能滚,交给浏览器处理
|
||||||
|
if (this._isInsideScrollablePanel(e, direction)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const currentIndex = this.getCurrentSectionIndex(scrollRoot);
|
const currentIndex = this.getCurrentSectionIndex(scrollRoot);
|
||||||
const currentEl = document.getElementById(this.sectionIds[currentIndex]);
|
const currentEl = document.getElementById(this.sectionIds[currentIndex]);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user