What Are 'Scrolling Boxes'

What are `scrolling boxes`?

As @alex said a scrolling box is a box where the value of overflow is set to a value different from visible (the default one). I cannot confirm but I concluded this based on this previous answer where overflow is creating some issues with sticky element.

As I explained there, if you have an element with overflow:hidden as an ancestor of the position:sticky this one will stop working because its offset will be calculated based on that box (with overflow:hidden) because it's the nearest ancestor with a scrolling box. Since we used hidden we cannot scroll this box so we cannot see the sticky behavior.

Here is a basic example:

.wrapper {  height:200vh;  border:2px solid;}.wrapper >div {  position:sticky;  top:0;  height:20px;  background:red;}

<div class="wrapper">  <div></div></div>

Scroll boxes/bars linked by ref jumpy in React (especially mobile)

The best way I found of doing this is using the npm package react-scroll-sync

https://www.npmjs.com/package/react-scroll-sync

This allows you to sync the two scrolls with minimal jumpyness (not perfect)

HTML - Scrolling inner box when it reaches a specific size

Here you go:
http://codepen.io/dherran/pen/KzEdZZ

.wrapper {  width: 400px;}
.left {  float: left;  height: 100px;  max-width: calc(100% - 40px);  overflow-x: auto;  overflow-y: hidden;  white-space: nowrap;}
.right {  float: left;  width: 40px;  height: 100px;  background: black;  color: white;  text-align: center;}
.box {  display: inline-block;  width: 40px;  height: 100px;  border: 1px solid white;  background: blue;}

<div class="wrapper">  <div class="left">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="right">    +  </div></div>

Horizontal scrolling boxes with text inside

Your issue seems to be with vertical-align. Try doing:

.elem {
    /* ... */
    vertical-align: middle;
}

I don't know in what you'll be using this, so I can't tell whether that's precisely what will work for you. If it ends up breaking something, try setting vertical-align to text-bottom / text-top / bottom / top, and see if that fixes it.

Scroll Box using Main scroll bar

you can just set the height of the wrapper to a larger one so that the content doesn't need to have their own scroll bar. The overflow-y:auto sets it into scroll because the height of the content is larger than the wrapper. If you want the height to just occupy the least amount of space you can use height:fit-content. You can read more about it here. You may want to remove the script first before trying this.

Edit: I read your comment. As far as I know you cannot edit the function of the main scroll bar so it is not possible for your target. What you can do though could be a lot more tedious to do. So you can have the wrapper set to position: absolute and z-index:0. Then you will have your 2 main content (above and below scrolling box) at z-index:1 and have it with margin:40vh 0. This doesn't work if you scroll with the main scroll bar, just when you scroll using mouse, mousepad, or mobile.

Scroll blessed box with child elements

I solved this by using a List instead of a Box full of Boxes. A list is scrollable and can have selectable elements.

Vertically position three elements: flexible box, scroll box & fixed box

This can be done fairly easily with flexbox. Check out the support tables for compatibility.

html,body { width: 100%; height: 100%;}
#container {    float: left;    height: 100%;    background-color: purple;    position: relative; display: flex; flex-direction: column;}
#header {    background-color: green;}
#main {    overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;    background-color: red; flex: 1; flex-grow: 1;}
#footer {    background-color:yellow;}

    <body>        <div id="container">            <div id="header">                START OF HEADER CONTENT and the viewer should be able to see all of it. Ipsum Blaster jango fett alderaan data dooku validium hypercube. Antilles mace windu uhura xindi millenium falcon bothan exterminate tylium ore. Endor maul skywalker everlasting matches antilles FTL tylium ore dooku. Paradox machine padawan speeder doctor who chewbacca AT-AT frack dagobah ice gun. Uhura data photon torpedo worf landspeeder starbuck hypercube cantina. END OF HEADER CONTENT            </div>            <div id="main">Craft beer jean shorts beard green juice, kinfolk 8-bit hoodie single-origin coffee letterpress seitan four dollar toast hammock occupy selfies pug. Retro locavore meditation craft beer viral, vinyl health goth cred butcher echo park. Echo park portland helvetica roof party hammock, food truck messenger bag pop-up poutine master cleanse hella artisan etsy. Celiac polaroid before they sold out tousled chillwave farm-to-table, leggings craft beer mlkshk viral seitan vegan intelligentsia. Yuccie synth poutine next level food truck, meggings chambray aesthetic farm-to-table marfa helvetica dreamcatcher blue bottle mumblecore brunch. Fixie narwhal lomo, art party pinterest direct trade poutine mlkshk organic forage irony. Wolf kickstarter authentic dreamcatcher plaid.
Yuccie tilde try-hard selfies gentrify DIY. Offal celiac gentrify cornhole, chia beard scenester quinoa freegan marfa thundercats pour-over synth. Migas salvia franzen pabst, blog listicle freegan chia YOLO fashion axe locavore offal. Paleo whatever messenger bag, 3 wolf moon normcore aesthetic humblebrag pug narwhal lo-fi lomo lumbersexual. Chambray yuccie selfies, tattooed biodiesel pitchfork artisan mixtape actually iPhone single-origin coffee 8-bit master cleanse aesthetic. Kickstarter chillwave VHS tousled green juice. Meggings mumblecore gentrify chambray blue bottle brooklyn.
Four dollar toast sriracha hammock iPhone authentic, quinoa wayfarers pop-up taxidermy post-ironic next level offal YOLO chartreuse fingerstache. Forage salvia direct trade photo booth YOLO, fixie paleo sartorial deep v. Distillery art party pop-up meggings sartorial thundercats vice, portland jean shorts flannel readymade godard. 3 wolf moon single-origin coffee you probably haven't heard of them chillwave selfies cred. Scenester asymmetrical seitan blue bottle bitters banh mi swag, etsy disrupt 90's. Kombucha normcore echo park, photo booth bushwick stumptown retro before they sold out. Chillwave art party heirloom ugh.
Cliche authentic paleo fingerstache banjo actually artisan sriracha helvetica twee, trust fund portland PBR&B. Aesthetic pork belly pop-up bitters distillery, banh mi try-hard cred meditation letterpress schlitz 90's celiac neutra. Irony street art actually cliche cray asymmetrical. Bicycle rights kombucha beard crucifix, deep v cray 3 wolf moon listicle before they sold out shabby chic distillery pitchfork. Meh aesthetic tacos flannel, pug paleo DIY austin. Gastropub kinfolk cliche crucifix, swag post-ironic irony heirloom keytar thundercats 8-bit beard. You probably haven't heard of them migas marfa leggings normcore.
Four loko gentrify ramps, mixtape sartorial fashion axe ethical organic meditation williamsburg. Blue bottle freegan synth hoodie, swag bitters letterpress chillwave pop-up. Hella chicharrones next level ramps chillwave, portland freegan tattooed neutra disrupt austin 3 wolf moon kale chips roof party. Lumbersexual try-hard cold-pressed, affogato offal bushwick thundercats stumptown. Leggings knausgaard gastropub, raw denim bitters lo-fi four dollar toast tilde truffaut meh. Truffaut umami artisan, irony affogato tattooed literally yuccie pabst chia wolf hammock craft beer photo booth. Lomo roof party tumblr thundercats meggings ennui messenger bag, next level franzen synth kickstarter pork belly vegan.            </div>            <div id="footer">                footer some stuff goes here            </div>        </div>
    </body>

Making two textareas horizontally scroll in sync

To make a simple scrolling motion which will be equal on both scroll bars depending on the lower one. You will have to convert the values of the scroll bars to percentage values. For this to work there has to be some scrollable content in the lower text area.

Here is an update to the function which implements percentage values

function select_scroll(e) {
    let percent = bodybox.scrollLeft / (bodybox.scrollWidth - bodybox.clientWidth);
    headbox.scrollLeft =  (headbox.scrollWidth - headbox.clientWidth)* percent;
}

What Are 'Scrolling Boxes'