折边滚动表情选择器

表情网格滚入上下边缘时向内弯折、压缩，搜索栏保持固定，支持搜索与选择。

滚动交互六框架TypeScript

演示

滚动表情网格，按字符或类别搜索并点击选择。方向键移动，Home/End 跳转，Escape 清空搜索。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

FoldedEmojiScroll.tsx

正在加载代码…

App.tsx

import { FoldedEmojiScroll } from "./FoldedEmojiScroll";

export default function App() {
  return <FoldedEmojiScroll />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.query` 初始化或更新本地表情搜索。	`string`	`""`
`options.value` 选中的表情字符；用户选择时触发 onSelect。	`string`
`options.foldSize` 折边宽度，按设计像素计，范围 0–72。	`number`	`42`
`options.onSelect` 用户选择表情时回调，不包含外部参数更新。	`(emoji: string) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`960`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`