simon/floter.design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix drag scrolling in Safari

Browse source
This commit is contained in:
saiminh 2023-10-16 11:27:10 +02:00
parent eb7fd9b56e
commit df2e05c576
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/routes/work/[slug]/+page.svelte
View file

@ -38,8 +38,11 @@
let isDown = false; let isDown = false;
if (gallery) { if (gallery) {
gallery.addEventListener('mousedown', (e) => { gallery.addEventListener('mousedown', (e) => {
e.preventDefault();
gallery.style.scrollSnapType = 'none';
gallery.style.scrollBehavior = 'auto';
isDown = true; isDown = true;
startX = e.pageX - gallery.offsetLeft; startX = e.pageX;
scrollLeft = gallery.scrollLeft; scrollLeft = gallery.scrollLeft;
}); });
gallery.addEventListener('mouseleave', () => { gallery.addEventListener('mouseleave', () => {
@ -51,7 +54,7 @@
gallery.addEventListener('mousemove', (e) => { gallery.addEventListener('mousemove', (e) => {
if (!isDown) return; if (!isDown) return;
e.preventDefault(); e.preventDefault();
const x = e.pageX - gallery.offsetLeft; const x = e.pageX;
const walk = (x - startX) * 4; //scroll-fast const walk = (x - startX) * 4; //scroll-fast
gallery.scrollLeft = scrollLeft - walk; gallery.scrollLeft = scrollLeft - walk;
}); });
@ -131,12 +134,12 @@
<style lang="scss"> <style lang="scss">
.subnav { .subnav {
@media screen and (min-width: 768px) {
position: fixed; position: fixed;
z-index: 22;
@media screen and (min-width: 768px) {
top: 0; top: 0;
left: 0; left: 0;
display: inline-block; display: inline-block;
z-index: 22;
} }
} }
.subnav-item { .subnav-item {
@ -256,14 +259,14 @@
position: relative; position: relative;
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
margin-bottom: -80px;
top: -80px;
padding: 0 0 1em 0; padding: 0 0 1em 0;
z-index: 1; z-index: 1;
opacity: 0.75; opacity: 0.75;
perspective: 250px; perspective: 250px;
perspective-origin: center bottom; perspective-origin: center bottom;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
margin-bottom: -80px;
top: -80px;
padding: 2em 0 4em 0; padding: 2em 0 4em 0;
margin-bottom: -120px; margin-bottom: -120px;
perspective: 500px; perspective: 500px;