scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Extend scrollbar hitbox to canvas edges

Browse source
This commit is contained in:
adroitwhiz 2020-05-29 13:29:08 -04:00
parent 87e01639c0
commit dc40eea771
2 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/scrollable-canvas/scrollable-canvas.css
View file

@ -2,31 +2,39 @@ $scrollbar-size: 8px;
$scrollbar-padding: 4px;
.vertical-scrollbar, .horizontal-scrollbar {
position: absolute;
background: rgba(190, 190, 190, 0.8);
border-radius: calc($scrollbar-size / 2);
cursor: pointer;
width: 100%;
height: 100%;
}
.vertical-scrollbar-wrapper {
position: absolute;
width: $scrollbar-size;
right: $scrollbar-padding;
width: calc($scrollbar-size + $scrollbar-padding);
right: 0;
top: $scrollbar-padding;
height: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
}
.horizontal-scrollbar-wrapper {
position: absolute;
height: $scrollbar-size;
height: calc($scrollbar-size + $scrollbar-padding);
left: $scrollbar-padding;
bottom: $scrollbar-padding;
bottom: 0;
width: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
}
.vertical-scrollbar {
width: $scrollbar-size;
.vertical-scrollbar-hitbox, .horizontal-scrollbar-hitbox {
position: absolute;
cursor: pointer;
box-sizing: border-box;
}
.horizontal-scrollbar {
height: $scrollbar-size;
.vertical-scrollbar-hitbox {
width: calc($scrollbar-size + $scrollbar-padding);
padding-right: $scrollbar-padding;
}
.horizontal-scrollbar-hitbox {
height: calc($scrollbar-size + $scrollbar-padding);
padding-bottom: $scrollbar-padding;
}

16
src/components/scrollable-canvas/scrollable-canvas.jsx
View file

@ -13,7 +13,7 @@ const ScrollableCanvasComponent = props => (
style={{pointerEvents: 'none'}}
>
<div
className={styles.horizontalScrollbar}
className={styles.horizontalScrollbarHitbox}
style={{
width: `${props.horizontalScrollLengthPercent}%`,
left: `${props.horizontalScrollStartPercent}%`,
@ -23,14 +23,18 @@ const ScrollableCanvasComponent = props => (
}}
onMouseDown={props.onHorizontalScrollbarMouseDown}
onTouchStart={props.onHorizontalScrollbarMouseDown}
/>
>
<div
className={styles.horizontalScrollbar}
/>
</div>
</div>
<div
className={styles.verticalScrollbarWrapper}
style={{pointerEvents: 'none'}}
>
<div
className={styles.verticalScrollbar}
className={styles.verticalScrollbarHitbox}
style={{
height: `${props.verticalScrollLengthPercent}%`,
top: `${props.verticalScrollStartPercent}%`,
@ -40,7 +44,11 @@ const ScrollableCanvasComponent = props => (
}}
onMouseDown={props.onVerticalScrollbarMouseDown}
onTouchStart={props.onVerticalScrollbarMouseDown}
/>
>
<div
className={styles.verticalScrollbar}
/>
</div>
</div>
</div>
);