react trading view widget how to stop scroll on mouse wheel up down

Question

[![enter image description here][1]][1]I am using react trading view widget my client requirement is that it should stop scrolling on fixed button press. I have used this approach but its stopped all mouse events

i need just stop scrolling on chart its serious issue please help:

chartPosition is a state that will change on fixed button pressed just remember this

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>
  );
};

I want to stop scrolling inside the chart [1]: https://i.stack.imgur.com/6KfTp.png

see this link : `https://www.tradingview.com/widget/advanced-chart/` — davood Sandoghsaz, Dec 01 '21 at 12:48

davood Sandoghsaz · Answer 1 · 2021-12-01T12:29:54.433

0

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 }

edited Dec 01 '21 at 12:29

answered Dec 01 '21 at 11:59

davood Sandoghsaz

674
1
4
13

Not working please review the question – Noman Dec 01 '21 at 12:04
What is className of div that has scroll in chart? – davood Sandoghsaz Dec 01 '21 at 12:09
problem is its inside the iframe and inside the canvas we can't get it – Noman Dec 01 '21 at 12:12
I add a classname to the div and you can style it: `.disable-scroll iframe canvas { overflow: "hidden"}` – davood Sandoghsaz Dec 01 '21 at 12:14
is its working ? – Noman Dec 01 '21 at 12:16
But all canvas inside of your chart take the style. if the canvas has a id use that id instead of canvas. – davood Sandoghsaz Dec 01 '21 at 12:16
You should check it cause I don't have access to your code – davood Sandoghsaz Dec 01 '21 at 12:17
react-tradingview-widget here is the package you can test here it – Noman Dec 01 '21 at 12:18
its not overflowing i want to stop zoom in out on scroll not overflow – Noman Dec 01 '21 at 12:21
Probably your style will work on it: `.disable-scroll iframe canvas { pointerEvents: none }` – davood Sandoghsaz Dec 01 '21 at 12:24
check this: `.disable-scroll .chart-container { pointer-events: none }` put this inside of a CSS file – davood Sandoghsaz Dec 01 '21 at 12:28
pointer event none stoped click event also i want click event just to stop zoom in out – Noman Dec 01 '21 at 12:30
thanks for your collaboration but i need just to stop zoom event – Noman Dec 01 '21 at 12:30
i have used these already – Noman Dec 01 '21 at 12:31
and i think we can't get the classes inside the iframe – Noman Dec 01 '21 at 12:32
TradingViewWidget doesn't have a attribute like zoom that take a boolean value? – davood Sandoghsaz Dec 01 '21 at 12:41
no its don't have any attribute like this – Noman Dec 01 '21 at 12:47

react trading view widget how to stop scroll on mouse wheel up down

1 Answers1