feat: 筛选条支持鼠标滚轮横向滚动
桌面鼠标无横向滚轮且滚动条隐藏,溢出时末尾筛选项不可达。加非被动 wheel 监听,溢出时将 deltaY 转为横向 scrollLeft;未溢出则不接管,不影响页面滚动。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useI18n } from "../../i18n";
|
||||
import { typeFilterLabel } from "../../resourceTypeLabels";
|
||||
|
||||
@@ -20,6 +21,22 @@ export type FilterChipsProps = {
|
||||
|
||||
export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
|
||||
const { t } = useI18n();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Let a mouse wheel scroll the row horizontally when it overflows — desktop
|
||||
// mice have no horizontal wheel and the scrollbar is hidden, so otherwise the
|
||||
// last filters are unreachable. Touch/trackpad scroll natively.
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (e.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
|
||||
e.preventDefault();
|
||||
el.scrollLeft += e.deltaY;
|
||||
};
|
||||
el.addEventListener("wheel", onWheel, { passive: false });
|
||||
return () => el.removeEventListener("wheel", onWheel);
|
||||
}, []);
|
||||
|
||||
const tabClass = (active: boolean) =>
|
||||
[
|
||||
@@ -33,6 +50,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
|
||||
return (
|
||||
<div className="bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-10 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
|
||||
role="tablist"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user