Although this issue has been addressed multiple times, I am still unable to find a solution that works for me. The scrollbar continues to appear on Windows OS browsers such as Firefox, Edge, and IE.
Please note: I do not want to adjust padding or marginsI have attempted various methods to hide the scrollbar, but each time I do so, I lose the scroll functionality. Here are some of the techniques I have tried, and I may have overlooked a few due to the numerous iterations I have gone through.
::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;
While there have been other suggestions, none of them have been successful for me. I have seen recommendations to adjust padding to fake hiding the scrollbar, but I am hesitant to do this as it may impact the styling on certain devices.
Some people also recommended using pure JavaScript to subtract the child component's width from the parent component's width, but I prefer to stick to a pure CSS solution.
Here is my current code:
.rec-left--body {
padding: 0px 20px;
.form-content {
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;
height: 48vh;
margin: 10px 0px;
padding: 0 15px;
@media (min-width: $screen-sm) {
height: 325px;
padding: 0 10px;
}
.form-content::-webkit-scrollbar {
width: 0px;
}