Блог

[![введите описание изображения здесь][1]][1]Я использую виджет react trading view, мое требование к клиенту состоит в том, чтобы он прекращал прокрутку при нажатии фиксированной кнопки. Я использовал этот подход, но он остановил все события мыши

мне нужно просто перестать прокручивать график, это серьезная проблема, пожалуйста, помогите:

Положение диаграммы-это состояние, которое изменится при нажатии фиксированной кнопки, просто запомните это

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

Я хочу прекратить прокрутку внутри графика [1]: https://i.stack.imgur.com/6KfTp.png

Вы просто должны установить overflow: hidden :

 const NewBoard = ({ ticker, theme, selectedTime, chartPosition }) =gt; {  return (  lt;div  className={"custom-range "   chartPosition ? "disable-scroll" : ""}  style={{ overflow: chartPosition === "Fixed" ? "hidden" : "initial", height: "75%" }}  gt;  lt;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}  /gt;  lt;/divgt;  ); };  

и поместите этот стиль в файл css, который импортируется на вашу страницу:

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