React Trading View Widget点击固定按钮后如何仅禁用图表鼠标滚轮滚动

你现在用pointerEvents: "none"的方式会禁用所有鼠标交互，显然不符合需求，下面提供两种可直接落地的实现方式：

方案1：使用Trading View组件原生配置（优先推荐） #

React Trading View Widget 支持透传原生图表的滚动控制配置，直接通过参数控制滚动开关即可，不会影响其他交互：

const NewBoard = ({ ticker, theme, selectedTime, chartPosition }) => {
  return (
    <div
      className="custom-range"
      style={{ height: "75%" }}
    >
      <TradingViewWidget
        id="my_view"
        symbol={ticker}
        theme={theme === "LIGHT" ? Themes.LIGTH : Themes.DARK}
        locale="eng"
        interval={selectedTime}
        autosize={true}
        range={`${chartPosition === "Fixed" ? "ytd" : "all"}`}
        // 新增滚动控制配置
        mouse_wheel_scroll={chartPosition !== "Fixed"}
        pinch_to_zoom={chartPosition !== "Fixed"}
      />
    </div>
  );
};

配置说明：

• mouse_wheel_scroll：控制是否允许鼠标滚轮滚动图表
• pinch_to_zoom：控制移动端是否允许捏合缩放滚动，可根据需求选择是否添加

提示：如果配置不生效，可将参数名改为驼峰格式mouseWheelScroll、pinchToZoom，适配不同封装版本的组件属性规范。

方案2：手动监听滚轮事件阻止默认行为 #

如果上述原生配置不符合你的特殊场景，可以通过事件监听单独拦截滚动行为，其他鼠标交互完全不受影响：

import { useRef, useEffect } from 'react';

const NewBoard = ({ ticker, theme, selectedTime, chartPosition }) => {
  const chartContainerRef = useRef(null);

  useEffect(() => {
    const container = chartContainerRef.current;
    if (!container) return;

    const preventScroll = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    if (chartPosition === "Fixed") {
      // 拦截鼠标滚轮滚动
      container.addEventListener('wheel', preventScroll, { passive: false });
      // 如需拦截移动端触摸滚动，可添加下面这行
      // container.addEventListener('touchmove', preventScroll, { passive: false });
    } else {
      container.removeEventListener('wheel', preventScroll);
      // container.removeEventListener('touchmove', preventScroll);
    }

    // 组件卸载时清理监听
    return () => {
      container.removeEventListener('wheel', preventScroll);
      // container.removeEventListener('touchmove', preventScroll);
    };
  }, [chartPosition]);

  return (
    <div
      ref={chartContainerRef}
      className="custom-range"
      style={{ height: "75%" }}
    >
      <TradingViewWidget
        id="my_view"
        symbol={ticker}
        theme={theme === "LIGHT" ? Themes.LIGTH : Themes.DARK}
        locale="eng"
        interval={selectedTime}
        autosize={true}
        range={`${chartPosition === "Fixed" ? "ytd" : "all"}`}
      />
    </div>
  );
};

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