Update scroll styles and z-index
This commit is contained in:
parent
2c1a5ae0e8
commit
1620b81e96
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue