在 IE-11 中滚动 ReactJs 会在右侧显示额外的栏

Question

我在 IE-11 中创建了一个 ReactJS 应用程序。我想以编程方式在某个点滚动。一切都很好，但是当滚动发生时，右侧出现令人不快的滚动条，我的所有设计都损坏了。我该如何防止这种情况？

滚动前：

滚动后：

我要滚动的代码：

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

<div>
    <span ref={refFirstPoint}>{timeAM_PM(i)}</span>
</div>

Answer 1

终于找到问题了。要解决此问题，请应用这些更改：

在父级 div 中，我们隐藏滚动条并防止在我们以编程方式更改子滚动条位置时再次显示它：将其框限制设置为 -ms-scroll-limit: 0 0 0 0

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

在子 div 中，我们隐藏滚动条并以编程方式控制滚动条。

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

在 IE-11 中滚动 ReactJs 会在右侧显示额外的栏

Scrolling at ReactJs in IE-11 shows extra bar at right side

internet-explorer-11

reactjs