Update scroll styles and z-index

This commit is contained in:
Andrew Kingston 2023-03-02 09:27:16 +00:00
parent 2c1a5ae0e8
commit 1620b81e96
5 changed files with 83 additions and 29 deletions

View File

@ -7,6 +7,7 @@
// Bar config
const barOffset = 4
const padding = 180
// State for dragging bars
let initialMouse
@ -20,25 +21,25 @@
// Calculate V scrollbar size and offset
// Terminology is the same for both axes:
// contentX - the size of the rendered content
// contentX - the size of the rendered content, including padding
// renderX - the space available to render the bar in, edge to edge
// barX - the length of the bar
// availX - the space available to render the bar in, until the edge
// barX - the offset of the bar
$: contentHeight = ($rows.length + 1) * cellHeight
$: contentHeight = ($rows.length + 1) * cellHeight + padding
$: renderHeight = height - 2 * barOffset
$: barHeight = Math.max(50, (height / contentHeight) * renderHeight)
$: availHeight = renderHeight - barHeight
$: maxScrollTop = Math.max(contentHeight - height + 180, 0)
$: maxScrollTop = Math.max(contentHeight - height, 0)
$: barTop = barOffset + cellHeight + availHeight * (scrollTop / maxScrollTop)
// Calculate H scrollbar size and offset
$: contentWidth = calculateContentWidth($columns, $stickyColumn)
$: contentWidth = calculateContentWidth($columns, $stickyColumn) + padding
$: totalWidth = width + 40 + $stickyColumn?.width || 0
$: renderWidth = totalWidth - 2 * barOffset
$: barWidth = Math.max(50, (totalWidth / contentWidth) * renderWidth)
$: availWidth = renderWidth - barWidth
$: maxScrollLeft = Math.max(contentWidth - totalWidth + 180, 0)
$: maxScrollLeft = Math.max(contentWidth - totalWidth, 0)
$: barLeft = barOffset + availWidth * (scrollLeft / maxScrollLeft)
// Calculate whether to show scrollbars or not

View File

@ -117,7 +117,7 @@
display: flex;
flex-direction: row;
justify-items: flex-start;
align-items: stretch;
align-items: flex-start;
overflow: hidden;
height: 0;
position: relative;
@ -127,5 +127,6 @@
overflow: hidden;
display: flex;
flex-direction: column;
align-self: stretch;
}
</style>

View File

@ -68,7 +68,7 @@
background: var(--background);
padding: 0 var(--cell-padding);
gap: calc(2 * var(--cell-spacing));
z-index: 10;
z-index: 25;
border-bottom: none;
}
.cell.header :global(> span) {

View File

@ -18,22 +18,68 @@
$: scrollTop = $scroll.top
$: scrollLeft = $scroll.left
$: offsetY = scrollVertically ? -1 * (scrollTop % cellHeight) : 0
$: offsetY = -1 * (scrollTop % cellHeight)
$: hiddenWidths = calculateHiddenWidths($visibleColumns)
$: offsetX = scrollHorizontally ? -1 * scrollLeft + hiddenWidths : 0
$: offsetX = -1 * scrollLeft + hiddenWidths
$: rowCount = $visibleRows.length
$: contentWidth = calculateContentWidth($visibleColumns, scrollHorizontally)
$: contentHeight = calculateContentHeight(rowCount, scrollVertically)
$: style = getStyle(offsetX, offsetY, contentWidth, contentHeight)
$: innerStyle = getInnerStyle(
offsetX,
offsetY,
contentWidth,
contentHeight,
scrollHorizontally,
scrollVertically
)
$: outerStyle = getOuterStyle(
offsetX,
offsetY,
contentWidth,
contentHeight,
scrollHorizontally,
scrollVertically
)
const getStyle = (offsetX, offsetY, contentWidth, contentHeight) => {
let style = `--offset-y:${offsetY}px; --offset-x:${offsetX}px;`
if (contentWidth) {
style += `--width:${contentWidth}px;`
const getInnerStyle = (
offsetX,
offsetY,
contentWidth,
contentHeight,
scrollH,
scrollV
) => {
if (!scrollH) {
offsetX = 0
}
if (contentHeight) {
style += `--height:${contentHeight}px;`
if (!scrollV) {
offsetY = 0
}
let style = `--offset-x:${offsetX}px;--offset-y:${offsetY}px;`
// if (scrollH && contentWidth) {
// style += `width:${contentWidth}px;`
// }
// if (scrollV && contentHeight) {
// style += `height:${contentHeight}px;`
// }
return style
}
const getOuterStyle = (
offsetX,
offsetY,
contentWidth,
contentHeight,
scrollH,
scrollV
) => {
let style = ""
// if (scrollV) {
// style += `height:${contentHeight + offsetY}px;`
// }
// if (scrollH) {
// style += `width:${contentWidth + offsetX}px;`
// }
return style
}
@ -87,20 +133,20 @@
}
</script>
<div on:wheel|passive={wheelInteractive ? handleWheel : null}>
<div class="scroll-wrapper" {style}>
<div class="outer" on:wheel|passive={wheelInteractive ? handleWheel : null}>
<div class="inner" style={innerStyle}>
<slot />
</div>
</div>
<style>
div {
}
.outer {
min-width: 100%;
min-height: 100%;
}
.scroll-wrapper {
.inner {
transform: translate3d(var(--offset-x), var(--offset-y), 0);
width: var(--width);
height: var(--height);
}
</style>

View File

@ -152,20 +152,26 @@
<style>
.sticky-column {
flex: 0 0 var(--width);
z-index: 20;
overflow: visible;
border-right: var(--cell-border);
}
.sticky-column.scrolled {
box-shadow: 1px -4px 8px rgba(0, 0, 0, 0.1);
flex: 0 0 calc(var(--width) + 0px);
}
.sticky-column :global(.cell) {
border-right-width: 0;
z-index: 26;
}
.sticky-column.scrolled {
}
.sticky-column.scrolled :global(.cell:not(.label):after) {
content: " ";
position: absolute;
width: 10px;
height: 100%;
left: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}
.header {
border-bottom: var(--cell-border);
position: relative;
z-index: 1;
}
.row {
display: flex;