SolidJS中onscroll滚动事件无法检测的问题咨询

<div onscroll={}> 在SolidJS中完全可以正常工作，你遇到的问题核心是外层div没有产生滚动行为——它的高度默认被内容撑开，没有超出自身容器范围，所以滚动事件不会被触发。

下面提供两种可行的解决办法：

方法一：将外层div设置为可滚动容器 #

给绑定了onscroll事件的div添加固定高度和溢出属性，让它成为能产生滚动的容器：

import type { Component } from 'solid-js';
import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {
  return (
    <div 
      onscroll={() => console.log("Scroll detected")}
      style={{ height: "100vh", overflow: "auto" }} // 添加滚动容器样式
    >
      <div class={styles.App}>
        <header class={styles.header}>
          <img src={logo} class={styles.logo} alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            class={styles.link}
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Solid
          </a>
        </header>
      </div>
      <div class={styles.App}>
        <header class={styles.header}>
          <img src={logo} class={styles.logo} alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            class={styles.link}
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Solid
          </a>
        </header>
      </div>
    </div>
  );
};

export default App;

设置height: 100vh让容器占满视口高度，overflow: auto会在内容超出时自动显示滚动条，此时滚动容器内部就能触发onscroll事件。

方法二：监听全局window滚动事件 #

如果需要监听整个页面的滚动行为，可以直接给window添加事件监听，利用SolidJS的生命周期函数管理监听的添加与移除：

import type { Component } from 'solid-js';
import { onMount, onCleanup } from 'solid-js';
import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {
  const handleScroll = () => console.log("Window scroll detected");

  // 组件挂载时添加监听
  onMount(() => {
    window.addEventListener('scroll', handleScroll);
  });

  // 组件卸载时移除监听，避免内存泄漏
  onCleanup(() => {
    window.removeEventListener('scroll', handleScroll);
  });

  return (
    <div>
      <div class={styles.App}>
        <header class={styles.header}>
          <img src={logo} class={styles.logo} alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            class={styles.link}
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Solid
          </a>
        </header>
      </div>
      <div class={styles.App}>
        <header class={styles.header}>
          <img src={logo} class={styles.logo} alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            class={styles.link}
            href="#"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Solid
          </a>
        </header>
      </div>
    </div>
  );
};

export default App;

这样页面滚动时就会触发对应的事件回调，同时通过onCleanup移除监听，符合组件生命周期的最佳实践。

内容的提问来源于stack exchange，提问作者Praanto