Semi-fixed text in a scrolling container

Question

I've got a bunch of horizontal boxes containing text. The boxes are all in a horizontally scrolling container:

// generate some random data
var model = {
  leftEdge: ko.observable(0)
};
model.rows = populateArray(10 + randInt(20), randRow);

ko.applyBindings(model);

$(function() {
  $('.slide').on('scroll', function() {
    model.leftEdge(this.scrollLeft);
  })
})

function randRow() {
  var events = populateArray(50 + randInt(100), randEvent);
  var left = randInt(1000);
  events.forEach(function(event) {
    event.left = left;
    left += 10 + event.width + randInt(1000);
  });
  return {
    events: events
  }
}

function randEvent() {
  var word = randWord()
  var width = 50 + Math.max(8 * word.length, randInt(200));
  var event = {
    left: 0,
    width: width,
    label: word
  };
  event.offset = ko.computed(function() {
    // reposition the text to stay 
    // * within its container
    // * fully on-screen (if possible)
    var leftEdge = model.leftEdge();
    return Math.max(0, Math.min(
      leftEdge - event.left,
      event.width - 8 * event.label.length
    ));
  });
  return event;
}

function randWord() {
  var n = 2 + randInt(5);
  var ret = "";
  while (n-- > 0) {
    ret += randElt("rmhntsk");
    ret += randElt("aeiou");
  }
  return ret;
}

function randElt(arr) {
  return arr[randInt(arr.length)];
}

function populateArray(n, populate) {
  var arr = new Array(n);
  for (var i = 0; i < n; i++) {
    arr[i] = populate();
  }
  return arr;
}

function randInt(n) {
  return Math.floor(Math.random() * n);
}

.slide {
  max-width: 100%;
  overflow: auto;
  border: 5px solid black;
}
.row {
  position: relative;
  height: 25px;
}
.event {
  position: absolute;
  top: 2.5px;
  border: 1px solid black;
  padding: 2px;
  background: #cdffff;
  font-size: 14px;
  font-family: monospace;
}
.event > span {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="slide" data-bind="foreach: rows">
  <div class="row" data-bind="foreach: events">
    <div class="event" data-bind="style: { left: left+'px', width: width+'px' }"><span data-bind="text:label, style: { left: offset() + 'px' }"></div>
    </div>
</div>

What I'd like to do is as the user scrolls from left-to-right, reposition the text within each box that partially overlaps the left border of the visible window to keep the text as visible as possible.

Currently I'm doing this by manually repositioning each item of text.

Is there a cleaner way to do this using CSS?

Answer 1

A friend helped me come up with this solution.

In English, the idea is to add an overlay to each row that is positioned relatively to the frame of the scrolling box, rather than the contents.

Then we can place a label for any box that overlaps the left edge in this overlay and it will appear to smoothly move as the box underneath it scrolls.

// generate some random data
var model = {
  leftEdge: ko.observable(0),
};
model.rows = populateArray(10 + randInt(20), randRow);
model.width = Math.max.apply(Math, $.map(model.rows, function(row) {
  return row.width
}));

ko.applyBindings(model);

$(function() {
  $('.slide').on('scroll', function() {
    model.leftEdge(this.scrollLeft);
  })
})

function randRow() {
  var events = populateArray(50 + randInt(100), randEvent);
  var left = randInt(1000);
  events.forEach(function(event) {
    event.left = left;
    left += 10 + event.width + randInt(1000);
  });
  return {
    events: events,
    width: left
  }
}

function randEvent() {
  var word = randWord()
  var width = 50 + Math.max(8 * word.length, randInt(200));
  var event = {
    width: width,
    label: word,
  };
  event.tense = ko.computed(function() {
    // reposition the text to stay#
    // * within its container
    // * fully on-screen (if possible)
    var leftEdge = model.leftEdge();
    return ['future', 'present', 'past'][
      (leftEdge >= event.left) + 
      (leftEdge > event.left + event.width - 8 * event.label.length)
    ];
  });
  return event;
}

function randWord() {
  var n = 2 + randInt(5);
  var ret = "";
  while (n-- > 0) {
    ret += randElt("rmhntsk");
    ret += randElt("aeiou");
  }
  return ret;
}

function randElt(arr) {
  return arr[randInt(arr.length)];
}

function populateArray(n, populate) {
  var arr = new Array(n);
  for (var i = 0; i < n; i++) {
    arr[i] = populate();
  }
  return arr;
}

function randInt(n) {
  return Math.floor(Math.random() * n);
}

.wrapper {
  position: relative;
  border: 5px solid black;
  font-size: 14px;
  font-family: monospace;
}
.slide {
  max-width: 100%;
  overflow: auto;
}
.slide > * {
  height: 25px;
}
.overlay {
  position: absolute;
  width: 100%;
  left: 0;
}
.overlay .past {
  display: none
}
.overlay .present {
  position: absolute;
  z-index: 1;
  top: 5.5px;
  left 0;
}
.overlay .future {
  display: none
}
.row {
  position: relative;
}
.event {
  position: absolute;
  top: 2.5px;
  border: 1px solid black;
  padding: 2px;
  background: #cdffff;
  height: 14px;
}
.event .past {
  float: right;
}
.event .present {
  display: none;
}
.event .future {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="wrapper">
  <div class="slide" data-bind="foreach: rows, style: { width: width + 'px' }">
    <div class="overlay" data-bind="foreach: events">
      <span data-bind="text:label, css: tense"></span>
    </div>
    <div class="row" data-bind="foreach: events">
      <div class="event" data-bind="style: { left: left+'px', width: width+'px' }"><span data-bind="text:label, css: tense"></div>
    </div>
</div></div>

This doesn't result in less javascript, but it does result in more efficient javascript, as class changes happen much less often than offset changes, so fewer updates to DOM elements are required.

You can avoid processing every "event" (in the above example) by doing some pre-partitioning of the horizontal space, and only updating events in the relevant partition.