hookehuyr

fix(StudyDetailPage): 调整评论区域滚动偏移量并重新计算容器高度

将评论区域的滚动偏移量从30调整为20,以提高用户体验。同时,在点击课程时重新计算顶部和底部容器的高度,确保布局正确
...@@ -332,7 +332,7 @@ const handleScroll = () => { ...@@ -332,7 +332,7 @@ const handleScroll = () => {
332 if (!introElement || !commentElement) return; 332 if (!introElement || !commentElement) return;
333 333
334 const scrollTop = window.scrollY; 334 const scrollTop = window.scrollY;
335 - const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value) - 30; // 30是一个偏移量 335 + const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value) - 20; // 20是一个偏移量
336 336
337 // 根据滚动位置更新activeTab 337 // 根据滚动位置更新activeTab
338 if (scrollTop >= commentOffset) { 338 if (scrollTop >= commentOffset) {
...@@ -365,6 +365,18 @@ const handleLessonClick = async (lesson) => { ...@@ -365,6 +365,18 @@ const handleLessonClick = async (lesson) => {
365 commentList.value = comment.data.comment_list; 365 commentList.value = comment.data.comment_list;
366 commentCount.value = comment.data.comment_count; 366 commentCount.value = comment.data.comment_count;
367 } 367 }
368 +
369 + // 重新计算顶部和底部容器的高度
370 + nextTick(() => {
371 + const topWrapper = document.querySelector('.top-wrapper');
372 + const bottomWrapper = document.querySelector('.bottom-wrapper');
373 + if (topWrapper) {
374 + topWrapperHeight.value = topWrapper.clientHeight + 'px';
375 + }
376 + if (bottomWrapper) {
377 + bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px';
378 + }
379 + });
368 } 380 }
369 }; 381 };
370 382
......