How can I create a sticky element with overflow hidden that expands to fill a parent element with scroll on overflow?
For example:
.wrap {
position: absolute;
width: 250px;
height: 80px;
overflow: scroll;
background: #844;
}
.stick {
position: sticky;
white-space: nowrap;
overflow: hidden;
background: #484;
top: 0;
}
.text {
color: #ccc;
}<div class="wrap">
<div class="stick">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 10 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div>
<pre class="text">Hello and good bye to the sticky scroll once the wrap area scrolls past the initial width
a
b
c
d
e
f
g
h
</pre>
</div>The sticky green line does not fill the width of the scroll element in this scenario. The desired effect is visible when scrolling. While it could be achieved using JavaScript, my aim is to accomplish this with CSS.
A further requirement is for the sticky element to have overflow hidden because in practical use, it contains a wide canvas as a sub-element. This canvas exceeds the content width, such as the "text" mentioned above, and should not be visible beyond the size of "text".
An illustration:
https://i.sstatic.net/Z57fa.png
- The yellow portion remains sticky at the top - It stays in place when scrolling up or down.
- The yellow part scrolls horizontally along with the blue content.
- The yellow element does not expand the blue content; it adheres to the overflow hidden property.
- The yellow stick has the full width of the blue section.
Therefore, the sticky yellow component should:
- Have the same width as the blue content, hiding anything exceeding it
- Stay at the top of the viewport while scrolling up or down
- Follow the content's horizontal movement
In a real project, I utilize this feature in an MDI layout with multiple absolutely positioned "windows," each containing a single sticky element on the top and left of the content area, similar to how pixel bars function in GIMP when an image is opened. Although too intricate to display here, a basic representation is provided below:
The resizable handle allows adjusting the window size by dragging the bottom-right corner of the element.
(function() {
"use strict";
const spacer = {
el: null,
sz: {
small: [100, 100],
wide: [1000, 100],
high: [100, 1000],
big: [1000, 1000]
},
change: function (ev) {
let z = spacer.sz[ev.target.value];
spacer.el.style.width = z[0] + 'px';
spacer.el.style.height = z[1] + 'px';
},
init: function () {
spacer.el = document.querySelector('.content-spacer');
spacer.el.addEventListener('change', spacer.change);
}
};
... <!-- JavaScript code continues -->
})();... <!-- CSS code continues --> <div id="overlay"></div>
<div class="wrap">
<div class="window">
<div class="content-outer">
<div class="header"><span>Header</span></div>
<div class="content-inner">
<div class="corner">C</div>
<div class="top-line">
<div class="top-line-c"></div>
</div>
<div class="left-line">
<div class="left-line-c"></div>
</div>
<div class="content-text">
<div class="content-spacer">
<ul>
<!-- Radio buttons for resizing options -->
</ul>
</div>
</div>
</div>
</div>
<div class="sizer" id="sizer" tabindex="0"></div>
</div>
</div>