Make sticky element with overflow hidden expand - html

Question

How can I make a sticky element, with overflow hidden, expand to fill parent element that has scroll on overflow?
A minor 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>
Here the green line is sticky, but it does not fill the width of the scroll element, which is what I'm trying to achieve. The effect is visible once one start scrolling. I can solve it by JS, but hoping to do it with CSS.
The sticky element has overflow hidden as it, in real code, contains a wide canvas as a sub element. This element is wider then the content, as in "text" above, and should not be visible beyond the size of "text".
A picture:
The Yellow part is sticky to top: Scroll up / down it stays at top.
The Yellow part scrolls left / right. Follows the blue content left / right.
The Yellow part does not expand the blue part / viewable content AKA overflow hidden.
The Yellow part has full width of blue part
So the yellow sticky should:
Have same width as blue. Anything beyond this hidden
Stay at top of view-port if window scroll up/ down
Follow content left / right
In the real project I use it in a MDI layout with multiple absolute positioned "windows" having one sticky element on top and left of content area. Much like for example when you have a picture open in GIMP. (The pixel bars). Too complex to post code for it, but here is a small mock-up:
The "window" can be resized by dragging element in bottom-right corner.
(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);
}
};
const resizer = {
el: null,
overlay: null,
move: function (ev) {
ev.preventDefault();
ev.stopPropagation();
resizer.el_rz.style.marginTop = (ev.layerY - resizer.pos[0]) + 'px';
resizer.el_rz.style.marginLeft = (ev.layerX - resizer.pos[1]) + 'px';
},
end: function () {
window.removeEventListener('mousemove', resizer.move);
window.removeEventListener('mouseup', resizer.end);
resizer.overlay.style.display = 'none';
},
start: function (ev) {
let t = ev.target,
cs = getComputedStyle(t)
;
ev.preventDefault();
ev.stopPropagation();
resizer.el_rz = ev.target;
resizer.pos = [
ev.clientX - (parseInt(cs.marginLeft) || 0),
ev.clientY - (parseInt(cs.marginTop) || 0),
];
window.addEventListener('mouseup', resizer.end);
window.addEventListener('mousemove', resizer.move);
resizer.overlay.style.display = 'block';
},
init: function () {
resizer.el = document.getElementById("sizer");
resizer.overlay = document.getElementById("overlay");
resizer.el.addEventListener('mousedown', resizer.start);
}
};
function fill_numbers(el) {
let i, s = '';
for (i = 1; i < 500; ++i)
s += (i % 10) + ' ';
el.textContent = s;
}
resizer.init();
spacer.init();
fill_numbers(document.querySelector('.top-line-c'));
fill_numbers(document.querySelector('.left-line-c'));
})();
body {
position : relative;
width : 100vw;
height : 100%;
padding : 0;
margin : 0;
}
#overlay {
position : absolute;
display : none;
z-index : 100;
height : 100vh;
width : 100vw;
opacity : 0.1;
background : #333;
z-index : 100;
cursor : move;
}
.window {
position : absolute;
overflow : hidden;
margin-top : 5px;
margin-left : 5px;
min-width : 10px;
min-height : 10px;
background : #988;
padding : 0;
}
.sizer {
position : relative;
background : #8a8;
bottom : 0;
right : 0;
width : 15px;
height : 15px;
margin-top : 120px;
margin-left : 250px;
cursor : move;
}
.wrap {
position : relative;
background : #565;
width : 100%;
height : 100%;
}
.content-outer {
overflow : hidden;
top : 0;
bottom : 0;
right : 0;
left : 0;
position : absolute;
background : #a77;
padding : 0;
}
.corner {
position : sticky;
width : 25px;
height : 25px;
top : 0;
left : 0;
z-index : 150;
background : red;
}
.top-line {
top : 0;
margin-top : -25px;
margin-left : 25px;
position : sticky;
height : 25px;
background : pink;
width : 100%;
white-space : nowrap;
z-index : 100;
overflow : hidden;
}
.left-line {
position : sticky;
max-height : 100%;
overflow : hidden;
background : #494;
width : 25px;
left : 0;
z-index : 100;
text-align : center;
}
.left-line-c {
height : 5000px;
}
.content-inner {
position : absolute;
overflow : scroll;
top : 25px;
right : 0;
bottom : 0;
left : 0;
}
.content-text {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : 25px ;
}
.content-spacer {
background: rgb(186,124,13);
background: linear-gradient(90deg, rgba(186,124,13,1) 0%, rgba(112,25,58,0.9037815809917717) 53%, rgba(181,0,255,1) 100%);
margin : 15px;
width : 1000px;
height : 100px;
}
ul {
list-style : none;
margin : 0;
padding : 0;
}
.header {
background : #000;
color : #aaa;
height : 25px;
}
<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>
<li><label><input type="radio" name="sp" value="small">small</label></li>
<li><label><input type="radio" name="sp" value="wide" checked>wide</label></li>
<li><label><input type="radio" name="sp" value="high">high</label></li>
<li><label><input type="radio" name="sp" value="big">big</label></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sizer" id="sizer" tabindex="0"></div>
</div>
</div>

Answer 1

See if that is what you're needing :
.wrap {
position: absolute;
width: 250px;
height: 80px;
overflow: scroll;
background: #844;
}
.stick {
position: sticky;
display: table;
white-space: nowrap;
overflow: hidden;
background: #484;
}
.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</div>
<pre class="text">Hello and good bye to the sticky scroll once the wrap area scrolls past the initial width</pre>
</div>
This is going to expand the child <div> to the total content of the parent <div>.
Below the same example with the second snippet attached :
(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);
}
};
const resizer = {
el: null,
overlay: null,
move: function (ev) {
ev.preventDefault();
ev.stopPropagation();
resizer.el_rz.style.marginTop = (ev.layerY - resizer.pos[0]) + 'px';
resizer.el_rz.style.marginLeft = (ev.layerX - resizer.pos[1]) + 'px';
},
end: function () {
window.removeEventListener('mousemove', resizer.move);
window.removeEventListener('mouseup', resizer.end);
resizer.overlay.style.display = 'none';
},
start: function (ev) {
let t = ev.target,
cs = getComputedStyle(t)
;
ev.preventDefault();
ev.stopPropagation();
resizer.el_rz = ev.target;
resizer.pos = [
ev.clientX - (parseInt(cs.marginLeft) || 0),
ev.clientY - (parseInt(cs.marginTop) || 0),
];
window.addEventListener('mouseup', resizer.end);
window.addEventListener('mousemove', resizer.move);
resizer.overlay.style.display = 'block';
},
init: function () {
resizer.el = document.getElementById("sizer");
resizer.overlay = document.getElementById("overlay");
resizer.el.addEventListener('mousedown', resizer.start);
}
};
function fill_numbers(el) {
let i, s = '';
for (i = 1; i < 500; ++i)
s += (i % 10) + ' ';
el.textContent = s;
}
resizer.init();
spacer.init();
fill_numbers(document.querySelector('.top-line-c'));
fill_numbers(document.querySelector('.left-line-c'));
})();
body {
position : relative;
width : 100vw;
height : 100%;
padding : 0;
margin : 0;
}
#overlay {
position : absolute;
display : none;
z-index : 100;
height : 100vh;
width : 100vw;
opacity : 0.1;
background : #333;
z-index : 100;
cursor : move;
}
.window {
position : absolute;
overflow : hidden;
margin-top : 5px;
margin-left : 5px;
min-width : 10px;
min-height : 10px;
background : #988;
padding : 0;
}
.sizer {
position : relative;
background : #8a8;
bottom : 0;
right : 0;
width : 15px;
height : 15px;
margin-top : 120px;
margin-left : 250px;
cursor : move;
}
.wrap {
position : relative;
background : #565;
width : 100%;
height : 100%;
}
.content-outer {
overflow : hidden;
top : 0;
bottom : 0;
right : 0;
left : 0;
position : absolute;
background : #a77;
padding : 0;
}
.corner {
position : sticky;
width : 25px;
height : 25px;
top : 0;
left : 0;
z-index : 150;
background : red;
}
.top-line {
top : 0;
margin-top : -25px;
margin-left : 25px;
position : sticky;
height : 25px;
background : pink;
width : 100%;
display: table;
white-space : nowrap;
z-index : 100;
overflow : hidden;
}
.left-line {
position : sticky;
max-height : 100%;
overflow : hidden;
background : #494;
width : 25px;
left : 0;
z-index : 100;
text-align : center;
}
.left-line-c {
height : 5000px;
}
.content-inner {
position : absolute;
overflow : scroll;
top : 25px;
right : 0;
bottom : 0;
left : 0;
}
.content-text {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : 25px ;
}
.content-spacer {
background: rgb(186,124,13);
background: linear-gradient(90deg, rgba(186,124,13,1) 0%, rgba(112,25,58,0.9037815809917717) 53%, rgba(181,0,255,1) 100%);
margin : 15px;
width : 1000px;
height : 100px;
}
ul {
list-style : none;
margin : 0;
padding : 0;
}
.header {
background : #000;
color : #aaa;
height : 25px;
}
<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>
<li><label><input type="radio" name="sp" value="small">small</label></li>
<li><label><input type="radio" name="sp" value="wide" checked>wide</label></li>
<li><label><input type="radio" name="sp" value="high">high</label></li>
<li><label><input type="radio" name="sp" value="big">big</label></li>
</ul>
</div>
</div>
</div>
</div>
<div class="sizer" id="sizer" tabindex="0"></div>
</div>
</div>
I just added display: table; on the .top-line class.