没有滚动条的字幕式水平滚动？

Question

我见过overflow scrolling with no scrollbars和Hide scrollbar for mobile devices while keeping the scroll ability;不幸的是，这两个都提出了position: absolute;的解决方案，我认为我不能真正将其应用于我的问题。

此示例中的代码呈现：

基本上，红色轮廓框是类div的{​​{1}}，具有固定的宽度。这些div是并排的，位于容器div内部水平居中的容器中。顶部是为标题保留的，可能很长。我希望将标题呈现在右侧 - 但如果它们具有焦点，那么我希望标题能够使用键盘箭头按钮，鼠标滚轮左右滚动 - 或者（也是移动）左右拖动。

当然，由于右框标题为.myBox，因此无法滚动。如果我在左侧框中看到滚动条可见（overflow: hidden;），则根本看不到标题（我无法滚动）。

所以有可能以某种方式允许以这种方式滚动这些框的标题部分（有点像一个字幕滚动行为，但手动）？

• Bonus问题：是否存在一种JavaScript库（甚至更好，一种简单的CSS解决方案），它允许类似的东西 - 除非文本太长，否则会被截断并添加省略号（所以，而不是＆＃34;我的更长时间＆＃34;它应该显示＆＃34;我的偶数......＆＃34;开始时），然后当你从右向左拖动时，它也会在开始和结束时计算省略号 - 当你到达右端时，它会删除正确的省略号？

示例代码为：

＆＃13;

＆＃13;

overflow-x: scroll;

＆＃13;

.mainHolder {
  font-size: 14px;
  border: 2px solid #999;
  text-align: center; /* centers the span */
}

.centerer {
  border: 2px solid #555;
  display: inline-block; /* makes the span have the same width as its div contents*/
  margin: 0;
  padding: 0;
}

.myBox {
  width: 8em;
  border: 2px solid #F55;
  border-radius: 0.5em;
  display: inline-block; /* enables two myBox side-by-side */
}

.heading {
  height: 1.25em;
  border-radius: 0.25em;
  background-color: #94B6F7;
  overflow: hidden;
  overflow-x: scroll;
}

/*just as example, remove the scroller of box2*/
#box2 .heading {
  overflow-x: hidden;
}

＆＃13;

＆＃13;

＆＃13;