滑动到底部才允许关闭

原创于 2022-06-28 14:10:26 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

18 篇文章

订阅专栏

该代码片段展示了如何在React中实现一个只有当用户滚动到底部时才允许关闭的功能。通过监听`scroll`事件，动态更新按钮的禁用状态，确保用户必须浏览完整个内容才能关闭。此功能常见于条款和条件页面，确保用户阅读完所有内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动到底部才允许关闭

const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    if (!visible) {
      setDisabled(true);
      return;
    }
    const scrollDiv = document.getElementById('terms-and-condition-content');
    scrollDiv?.addEventListener('scroll', () => {
      setDisabled(prevState => prevState && scrollDiv?.scrollTop + scrollDiv?.clientHeight !== scrollDiv?.scrollHeight);
    });
  }, [visible]);

body:

<div>
  <div id="terms-and-condition-content">
	test
  </div>
  <div disabled={disabled}>
  	button
  <div>
<div>