Marquee-like horizontal scroll without scrollbars?

Question

I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.

The code in this example renders this:

Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.

Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).

So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?

• Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?

The example code is:

.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;
}

<div class="mainHolder">
  <span class="centerer">
    <div id="box1" class="myBox">
      <div class="heading">
      My very long title
      </div>
      <div class="data">
      Data: 1
      </div>
    </div>
    <div id="box2" class="myBox">
      <div class="heading">
      My even longer title
      </div>
      <div class="data">
      Data: 2
      </div>
    </div>
  </span>
</div>