reactjs - 反应交易视图小部件如何停止鼠标滚轮向上向下滚动

Question

[![在此处输入图像描述][1]][1]我正在使用反应交易视图小部件，我的客户要求它应该在固定按钮按下时停止滚动。我使用过这种方法，但它停止了所有鼠标事件

我需要停止在图表上滚动它的严重问题请帮助：

chartPosition 是一种在按下固定按钮时会改变的状态，请记住这一点

const NewBoard = ({ ticker, theme, selectedTime, chartPosition }) => {
  return (
    <div
      className="custom-range"
      style={
        chartPosition === "Fixed"
          ? { pointerEvents: "none", height: "75%" }
          : { pointerEvents: "initial", 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"}`}
        // withdateranges={true}
      />
    </div>
  );
};

我想停止在图表 [1] 内滚动：https ://i.stack.imgur.com/6KfTp.png

Answer 1

You just must set overflow: hidden :

const NewBoard = ({ ticker, theme, selectedTime, chartPosition }) => {
  return (
    <div
      className={"custom-range " + chartPosition ? "disable-scroll" : ""}
      style={{ overflow: chartPosition === "Fixed" ? "hidden" : "initial", 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"}`}
        // withdateranges={true}
      />
    </div>
  );
};

and put this style inside a css file that is imported to your page:

.disable-scroll .chart-container { pointer-events: none }