I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.
Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div. MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft