Блог

Я пытаюсь ускорить интерфейс, используя собственную прокрутку HTML/CSS вместо ручной настройки смещения, используя разницу между началом и концом перетаскивания. Это достаточно просто, чтобы включить прокрутку, но мне также нужно манипулировать элементами в соответствии с положением горизонтальной прокрутки.

Представьте себе график, на котором по оси x расположены метки, отмечающие начало каждого дня. Когда пользователь прокручивает график div поперек (сохраняя ось y слева и не мешая остальной части страницы) Я хочу, чтобы в поле зрения появилась метка дня, а затем, когда начало этого дня уходит слишком далеко влево, метка прилипает к краю, пока не появится новая метка на следующий день, чтобы заменить ее, как на этой странице.

Я могу заблокировать метки слева и при необходимости удалить их, используя фиксированный css, но мне нужна помощь в том, чтобы запускать различные состояния CSS в соответствии с горизонтальным положением. Я думаю, что мог бы заставить это работать, если бы было значение, которое я мог бы использовать в calc(). Я нашел несколько CSS-способов изменения значений на основе вертикального перемещения.

Некоторые примеры кода, если это поможет

 lt;div id="outerDiv" style="overflow-x: scroll; width: 100px"gt;  lt;div id="innerDiv" style="width: 3000px"gt;  lt;divgt;Day 1lt;/divgt;  lt;divgt;Day 2lt;/divgt;  lt;divgt;Day 3lt;/divgt;  lt;/divgt; lt;/divgt;