中间div滚动时右侧箭头div消失，如何实现两边箭头固定不位移？

1. 右箭头被放在了可滚动的.lk-verb-box容器内部，会随内容滚动被挤出可视区域
2. 原布局采用浮动实现，没有固定两侧箭头的位置，中间滚动容器的width属性缺少单位，导致布局计算异常
3. JS事件中写错了目标元素ID，原代码写为vbr10，实际元素ID为vrb10

1. 调整HTML结构，将右箭头移出滚动容器，和左箭头、中间滚动容器平级
2. 外层容器改用flex布局，固定两侧箭头位置，中间滚动区域自适应占满剩余宽度
3. 修正滚动容器的样式，移除冗余的滚动配置，补全属性单位
4. 修正JS事件中的元素ID

CSS #

body {
  font-family: sans-serif;
  color: #3d85c6;
}

.letter-changer {
  animation: example 5s linear 2s infinite alternate;
}

ul.mp-0,
.mp-0 {
  margin: 0;
  padding: 0;
}

div.lk-shadow{
  display: flex;
  align-items: center;
  padding: 0 5px;
  -webkit-box-shadow: 5px 7px 9px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 5px 7px 9px 0px rgba(0, 0, 0, 0.6);      
}

div.lk-verb-box {
  flex: 1;
  min-width: 150px;
  white-space: nowrap;
  overflow-x: auto;
  /* 隐藏滚动条为可选配置 */
  scrollbar-width: none;
}
div.lk-verb-box::-webkit-scrollbar {
  display: none;
}

div.lk-verb-border {
  margin: 5px;
}

.lk-scroll-arrow {
  width: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

ul.lk-verb {
  list-style: none;
  word-spacing: 0%;
  white-space: nowrap;
  margin: 0;
  padding: 5px;
}

li.lk-verb {
  display: inline-block;
  background-color: white;
  color: #3d85c6;
  border: solid 1px #3d85c6;
  height: 20px;
  line-height: 20px;
  padding: 5px 7px;
  margin: 0 2px;
  border-radius: 5px;
}

li.lk-verb:hover {
  background-color: #3d85c6;
  color: white;
  cursor: pointer;
}

.lk-ele-box {
  overflow-x: auto;
}


@keyframes example {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(140px);
  }
}

HTML #

<div class="lk-shadow">
  <div class="lk-scroll-arrow">&#129172;</div>
  <div class="lk-verb-box">
    <ul class="lk-verb mp-0">
      <li id="vrb1" class="lk-verb">Element 1</li>
      <li id="vrb2" class="lk-verb">Element 1</li>
      <li id="vrb3" class="lk-verb">Element 2</li>
      <li id="vrb4" class="lk-verb">Element 0</li>
      <li id="vrb5" class="lk-verb">Element 3</li>
      <li id="vrb6" class="lk-verb">Element 4</li>
      <li id="vrb7" class="lk-verb">Element 5</li>
      <li id="vrb8" class="lk-verb">Element 6</li>
      <li id="vrb9" class="lk-verb">Element 7</li>
      <li id="vrb10" class="lk-verb">Element 8</li>
      <li id="vrb11" class="lk-verb">Element 9</li>
    </ul>
  </div>
  <div class="lk-scroll-arrow">&#129174;</div>
</div>

JS #

document.addEventListener("keypress", function (e) {
  // 修正原代码写错的元素ID
  var el = document.getElementById("vrb10");
  el.scrollIntoView(true);
});

内容的提问来源于stack exchange，提问作者user3042631