How to prevent gauges and graphs to move when scrolling?

Hi,everytime I view my channel on my mobile the gauges are being dragged when I scroll. How can I prevent it and lock them in space?

Answer 1

[Yousef]

Hi

• One way to prevent the gauges from being dragged on the X axis is to use overflow-x: hidden; in your CSS.
• Another way to stop the element from being dragged off the screen on a mobile device is to use JavaScript to calculate the window scroll and offset of the element.
• You can also use the draggable attribute or the pointer-events property to disable the drag event on the gauges.

Answer 2

[Yousef]

HI @Bar

To prevent gauges from being dragged when scrolling on your mobile channel, you should first look at the CSS settings and use `position: fixed;` to lock the gauges in place. Additionally, check your JavaScript or JQuery code to disable any draggable functionality specifically for the gauges. It's also important to ensure your design is responsive, handling touch events properly, especially if you're using frameworks like React, Angular, or Vue. Using debugging tools like Chrome DevTools can be helpful for diagnosing and fixing the issue. Lastly, if your channel is built on a specific platform like WordPress or a mobile app development framework, consult their respective documentation for platform-specific solutions.

Answer 3

[Christopher Stapels]

If its really important, I would suggest you host them in an iframe on another site. The scrolling behavior is sometimes odd on mobile.