1

I created a ReactJS app in IE-11. I want to scroll at a certain point programmatically. every things are Ok, but when scroll occurred, an unpleasant scrollbar appears in right-side and all my design become damage. how can I prevent this?

Before scroll:

enter image description here

After scroll:

enter image description here

my code to scroll:

const refFirstPoint = useRef(null);
refFirstPoint.current.scrollIntoView();

<div>
    <span ref={refFirstPoint}>{timeAM_PM(i)}</span>
</div>
Hamed Taheri
  • 164
  • 2
  • 11
  • I don't completely understand, do you want to hide the scroll bar? – whatamidoingwithmylife Nov 06 '19 at 11:52
  • yes, actually i hide it by default, but then i scroll to certain element in my container programmatically, the scroll bar appeared again. – Hamed Taheri Nov 06 '19 at 12:16
  • How did you hide it? Does it only appear again in IE, have you tested other browsers? – whatamidoingwithmylife Nov 06 '19 at 12:19
  • I hide this using css. i test that in other browsers like chrome and Firefox and all things are ok. i have this issue just in ie-11 and my app should be run in ie-11. – Hamed Taheri Nov 06 '19 at 12:23
  • 1
    i hide scroll bar using '-ms-overflow-style: none;' – Hamed Taheri Nov 06 '19 at 12:27
  • 1
    Your method is not recommended. You must not hide a scrollbar if there's content to scroll. You can personalize it but you don't have to hide it. "This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future." https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style – Alexis Nov 06 '19 at 12:30
  • I agree with you and also i've tried to show scroll bar, after that the vertical scrollbar for my content was appeared. but in this situation also my previous extra bar for whole height screen will appeared again. – Hamed Taheri Nov 06 '19 at 12:37
  • Have you tried to use two div containers like [this answer](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll/16671476#16671476)? The examples in the answer can hide the scroll bar and still be able to scroll well in browsers. I think the issue might be related to the styles you used instead of the scroll function. It could be better if you share a minimal, reproducible example which can be tested. – Yu Zhou Nov 07 '19 at 09:35
  • Yes, I tried this one. the problem is so ridiculous. the whole HTML tag shift to left about 14px. I don't know what is the problem. is it related to IE-11 or react in IE-11? I don't have any issue in other browsers like chrome or firefox. – Hamed Taheri Nov 07 '19 at 10:23

1 Answers1

0

Finally, I found the problem. for solving this issue apply these changes:

In parent div, we hide scroll-bar and for preventing showing it again when we change child scrollbar position programmatically: set its box limit to -ms-scroll-limit: 0 0 0 0

#parent_div:{
overflow: hidden; 
-ms-scroll-limit:0 0 0 0; /*plays a vital role*/
}

In child div, we hide scrollbar and control a scroll-bar programmatically.

#child_div:{
scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* IE 11 */
  &::-webkit-scrollbar {
    /** Webkit */
    display: none;
  }
}
Hamed Taheri
  • 164
  • 2
  • 11