Javascript 没有滚动条的字幕状水平滚动条？

我看到了和；不幸的是，这两种方法都建议使用

位置：绝对我认为我无法真正将其应用于我的问题

本例中的代码呈现以下内容：


基本上，红色轮廓框是类
.myBox
的
div
s，具有固定的宽度。这些div并排放置在容器中，容器水平居中于容器div内。顶部为标题保留，标题可能较长。我希望标题呈现在右侧，但如果它们有焦点，那么我希望标题可以通过键盘箭头按钮、鼠标滚轮或（对于移动设备）左右拖动来左右滚动

当然，因为右框的标题有
溢出：隐藏，无法滚动。如果我让滚动条如左框一样可见（
overflow-x:scroll；
），则标题根本不可见（并且我无法滚动）

那么，是否有可能以某种方式允许以这种方式滚动这些框的标题部分（有点像字幕滚动行为，但手动）


附加问题：是否有一种JavaScript库（或者更好，一种简单的CSS解决方案），它允许类似的东西-除了，如果文本太长，它会被截断并添加省略号（因此，在开始时，它应该显示“我的甚至更长”，而不是“我的甚至更长”），然后从右向左拖动，它还计算开始和结束时的省略号-当你到达正确的结尾时，它会去掉正确的省略号

示例代码为：


.main支架{
字体大小：14px；
边框：2个实心#999；
文本对齐：居中；/*使跨度居中*/
}
塞特勒先生{
边框：2px实心#555；
display:inline block；/*使跨度与其div内容具有相同的宽度*/
保证金：0；
填充：0；
}
.我的盒子{
宽度：8em；
边框：2px实心#F55；
边界半径：0.5em；
显示：内联块；/*启用两个并排的myBox*/
}
.标题{
高度：1.25em；
边界半径：0.25em；
背景色：#94B6F7；
溢出：隐藏；
溢出-x：滚动；
}
/*例如，卸下box2的滚动条*/
#方框2.标题{
溢出x：隐藏；
}

我的长标题
数据：1
我甚至更长的头衔
数据：2
使用overflow hidden，然后使用javascript翻译内部子级。下面是您想要的东西：还有一个您可以尝试的东西-webkit overflow滚动：touch