JSFiddle - React, Tailwind, and code Playground

by Vyacheslav Yashnikov

HTML

<div id="viewport">
    <div class="sticky-box">
         <div class="sticky-track">
           
         </div>
      </div>
    <div id="content">
      
    </div>
</div>

<div id="debug"></div>

CSS

#debug {
    margin-left: 400px;
    width: 200px;
    background: beige;
    font-size: 9pt;
    opacity: 0.5;
    border: 1px solid gray;
    padding: 10px;
}



#viewport {
    float: left;
    border: 1px solid black;
    overflow: auto;
    width: 350px;
}

.sticky-box {
  height:400px;
  width: 100%;
  top: 0;
  left:0;
  overflow:hidden;
  will-change: transform;
  z-index:100;
  position: sticky;
}

.sticky-track {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index:100;
  background:#fff;
}

.row.horizontal {
  height: 100%;
  display: flex;
}

.inner_sticky {
  position:sticky;
  left:10px;
  width:100px;
  height:100%;
  border-radius: 30px;
  border: 1px solid black;
}

#content {
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.row {
    position: absolute;
    left: 0px;
    width: 100%;
    border-bottom: 1px dotted blue;
    font-size: 9pt;
}

.row:hover {
    background: rgba(0,0,255,0.05);
}

JavaScript

/*
Visual representation of the approach:

--------
   --------
      --------
         --------
            --------
               --------
                  --------
                     --------
                        --------
                           --------
                              --------
                                 --------
                                    --------
                                       --------
                                          --------

==================================================

[=] - real scrollable height (h)
[-] - "pages";  total height of all (n) pages is (th) = (ph) * (n)

The overlap between pages is (cj) and is the distance the scrollbar
will jump when we adjust the scroll position during page switch.

To keep things smooth, we need to minimize both (n) and (cj).
Setting (ph) at 1/100 of (h) is a good start.
*/


var th = 100000;            // virtual height
var h =  100000;               // real scrollable height
var ph = h / 100;               // page height
var n = Math.ceil(th / ph);     // number of pages
var vp = 400;                   // viewport height
var rh = 600;                    // row height
var cj = (th - h) / (n - 1);    // "jumpiness" coefficient

var page = 0;                   // current page
var offset=0;                   // current page offset
var prevScrollTop = 0;

var rows = {};                  // cached row nodes
var horizontalRows = {};

var viewport, content;


$(function() {
    viewport = $("#viewport");
    content = $("#content");
    horizontalContent = $(".sticky-track");
    
    viewport.css("height",vp);
    content.css("height",h);
    horizontalContent.css("width", h);
    
    viewport.scroll(onScroll);
    viewport.trigger("scroll");
});

function onScroll() {
    var scrollTop = viewport.scrollTop();
    
    if (Math.abs(scrollTop-prevScrollTop) > vp) 
        onJump();
    else
        onNearScroll();
    
    renderViewport();
    
   ...