yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: close panel when scroll

Browse Source
This commit is contained in:
shinya
2025-08-14 22:52:46 +08:00
parent 2b123d29e0
commit a9c5b9408d
2 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MultiLevelSelector.tsx
+9 -10
View File
@@ -460,11 +460,12 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
return value === optionValue;
};
// 监听滚动和窗口大小变化事件，重新计算位置
// 监听滚动和窗口大小变化事件
useEffect(() => {
const handleScroll = () => {
// 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) {
calculateDropdownPosition(activeCategory);
setActiveCategory(null);
}
};
@@ -474,10 +475,11 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
}
};
window.addEventListener('scroll', handleScroll);
// 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('scroll', handleScroll);
document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
};
}, [activeCategory]);
@@ -514,8 +516,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
>
<button
onClick={() => handleCategoryClick(category.key)}
className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${
activeCategory === category.key
className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${activeCategory === category.key
? isDefaultValue(category.key)
? 'text-gray-900 dark:text-gray-100 cursor-default'
: 'text-green-600 dark:text-green-400 cursor-default'
@@ -526,8 +527,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
>
<span>{getDisplayText(category.key)}</span>
<svg
className={`inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200 ${
activeCategory === category.key ? 'rotate-180' : ''
className={`inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200 ${activeCategory === category.key ? 'rotate-180' : ''
}`}
fill='none'
stroke='currentColor'
@@ -571,8 +571,7 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
onClick={() =>
handleOptionSelect(activeCategory, option.value)
}
className={`px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-lg transition-all duration-200 text-left ${
isOptionSelected(activeCategory, option.value)
className={`px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-lg transition-all duration-200 text-left ${isOptionSelected(activeCategory, option.value)
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-700'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/80'
}`}
src/components/SearchResultFilter.tsx
+7 -3
View File
@@ -111,15 +111,19 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
useEffect(() => {
const handleScroll = () => {
if (activeCategory) calculateDropdownPosition(activeCategory);
// 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) {
setActiveCategory(null);
}
};
const handleResize = () => {
if (activeCategory) calculateDropdownPosition(activeCategory);
};
window.addEventListener('scroll', handleScroll);
// 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('scroll', handleScroll);
document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
};
}, [activeCategory]);