2

I'm trying to speed up an interface by using native HTML/CSS scrolling instead of manually setting the offset using the difference between a drag start and drag end. It's simple enough to enable scrolling but I also need to manipulate items according to the horizontal scroll position.

Imagine a graph where labels are placed along the x-axis marking the start of each day. As the user scrolls the graph div across (keeping the y axis on the left and not interfering with the rest of the page) I want the day label to come into view and then when the start of that day goes too far off to the left the label sticks to the edge until a new label for the next day comes in to replace it, like this page.

enter image description here

I can lock labels to the left and fade it out as appropriate using fixed css, but what I need help with is triggering the different CSS states according to horizontal position. I think I could make it work if there was a value I could use in calc(). I have found some CSS ways of changing values based on vertical movement.

Some sample code incase it helps

<div id="outerDiv" style="overflow-x: scroll; width: 100px">
  <div id="innerDiv" style="width: 3000px">
    <div>Day 1</div>
    <div>Day 2</div>
    <div>Day 3</div>
  </div>
</div>
Craig
  • 8,093
  • 8
  • 42
  • 74
  • using CSS variables, right? – Mister Jojo Dec 11 '21 at 02:21
  • Possibly, if I knew which ones to use. It's an Angular app wrapped in Ionic and Capacitor if that makes any difference – Craig Dec 11 '21 at 02:24
  • You will have to make do with the browser inspector. Your question is purely speculative and offers no point of approach – Mister Jojo Dec 11 '21 at 02:29
  • I don't understand your answer @Mister JoJo. The question is concrete and I have a project to apply it to. The browser inspector is a good tool for debugging, but I can't use that to set the CSS on users's devices as they scroll – Craig Dec 11 '21 at 02:34
  • don't know what a browser inspector is? – Mister Jojo Dec 11 '21 at 02:36
  • Sorry, the comment submitted before I finished writing. I don't understand why you think my question is just speculative. I want to use the horizontal scroll position to apply different CSS to an element. – Craig Dec 11 '21 at 02:39
  • https://stackoverflow.com/questions/2481350/how-to-get-scrollbar-position-with-javascript – Mister Jojo Dec 11 '21 at 02:43
  • 1
    I find your question speculative because it does not provide any sample code and only allows us to speculate on your problem – Mister Jojo Dec 11 '21 at 02:47
  • Oh, I thought the attached gif explains it pretty well. I've added some code to help. A div containing another that scrolls and a few elements that I want to scroll across and then stop and fade away. I did try to make it as clear as possible. – Craig Dec 11 '21 at 02:53
  • Is this work for you? https://stackoverflow.com/questions/27843333/how-to-do-horizontal-parallax-scrolling – vee Dec 11 '21 at 03:34
  • Please, at least add CSS and JS that you have work on it about this. – vee Dec 11 '21 at 03:35
  • @vee I'm trying to ditch the JS and move to CSS. I don't think there is much point me showing you the stuff I am trying to delete and I don't have the CSS to show, that's the bit I am asking for help with – Craig Dec 11 '21 at 03:53

0 Answers0