我得到了下面的html

<aside class="SideNavLayoutWrapper">
  <div class="OverFlowWrapper">
    <div class="MenuWrapper">
      <a class="SideNavMenuItem">Link 1</a>
      <a class="SideNavMenuItem active">Link 2</a>
      <a class="SideNavMenuItem">Link 3</a>
      <a class="SideNavMenuItem">Link 4</a>
      <a class="SideNavMenuItem">Link 5</a>
      <a class="SideNavMenuItem">Link 6</a>
      <a class="SideNavMenuItem">Link 7</a>
      <a class="SideNavMenuItem">Link 8</a>
      <a class="SideNavMenuItem">Link 9</a>
    </div>
  </div>
</aside>

字符串
这是一个侧面导航
和下面的css一起去上面的html

body,
html {
  margin: 0;
  padding: 0;
}

.SideNavLayoutWrapper {
  will-change: transform;
  width: 260px;
  height: calc(100% - 60px);
  position: fixed;
  top: 60px;
  display: flex;
  flex-direction: column;
  z-index: 6;
  background-color: #384143;
  transform: translate3d(0px, 0px, 0px);
  transition: all 300ms linear;
}

.OverFlowWrapper {
  box-sizing: border-box;
  color: #fff;
  height: 100%;
  overflow-y: auto;
  width: 100%;
  padding: 0 0 10px 0;
  z-index: unset;
  display: block;
  position: static;
  background: transparent;
}

.MenuWrapper {
  transform: translate3d(0px, 0px, 0px);
  transition: transform linear 300ms;
}

.SideNavMenuItem {
  display: block;
  position: relative;
  min-height: 20px;
  min-width: 20px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
  transition: color 0.3s cubic-bezier(0, 0, 0.08, 1), background-color 0.3s cubic-bezier(0, 0, 0.08, 1);
  color: #FFFFFF;
  cursor: pointer;
  padding: 18px 18px 18px 0;
}

.SideNavMenuItem.active {
  color: #ee4900;
}

.SideNavMenuItem.active::before {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #384143;
    z-index: 99;
}

型
我的问题是，当一个SideNavMenuItem有一个active类来指示它是一个活动链接时，我希望在链接的右边有一个插入符号。
然而，虽然是的，它确实转到了链接的右侧，但由于.OverflowWrapper中的overflow-y: auto;，它对用户隐藏了。
overflow-y: auto;在那里，所以用户可以垂直滚动，但它也水平滚动现在作为插入符号添加在.SideNavMenuItem.active::before扩展链接的宽度，但我希望插入符号坐在外面的一边，它只有当.OverflowWrapper中的overflow-y: auto;被删除，但当我删除overflow-y: auto;然后用户不能垂直滚动。
有没有一种方法，我可以有插入符号标记对齐的活动链接的权利，并出现在外面的右边的一边，但也允许用户垂直滚动的一边？
这是否只能通过将插入符号移动到.SideNavLayoutWrapper元素之外并使用JavaScript将插入符号定位在正确的位置来实现？不过，这样一来，我需要处理当用户滚动时会发生什么，以及当用户滚动时链接不再可见时会发生什么？
任何帮助将不胜感激。