cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix jerky scrolling on Safari

This commit is contained in:
Nolan Lawson 2018-01-15 18:29:28 -08:00
parent 2bd553d64c
commit 7582f34d24
8 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
routes/_components/Layout.html
View File

@ -1,8 +1,10 @@
<Nav page={{page}} />
<main>
<slot></slot>
</main>
<div class="container">
<main>
<slot></slot>
</main>
</div>
<script>
import Nav from './Nav.html';

2
routes/_components/LazyTimeline.html
View File

@ -14,7 +14,7 @@
<style>
.loading-page {
width: 100%;
min-height: 40vh;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;

1
routes/_components/Nav.html
View File

@ -27,7 +27,6 @@
right: 0;
top: 0;
z-index: 10;
will-change: transform; /* avoids "repaints on scroll" for fixed position header */
}
ul {

18
routes/_components/VirtualList.html
View File

@ -1,5 +1,5 @@
<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight'/>
<div class="virtual-list" ref:node style="height: {{$height}}px;">
<:Window bind:innerHeight='innerHeight'/>
<div class="virtual-list" style="height: {{$height}}px;">
<!-- <div class="virtual-list-viewport" ref:viewport></div> -->
{{#each $visibleItems as item @key}}
<VirtualListItem :component
@ -19,7 +19,7 @@
import { virtualListStore } from '../_utils/virtualListStore'
import debounce from 'lodash/debounce'
const DEBOUNCE_TIME = 200
const DEBOUNCE_TIME = 500
export default {
oncreate () {
@ -35,12 +35,16 @@
'items': items
})
})
this.observe('scrollY', debounce((scrollY) => {
console.log('setting scrollY', scrollY)
document.body.querySelector('.container').addEventListener('scroll', debounce((e) => {
this.store.set({
scrollTop: scrollY
scrollTop: e.target.scrollTop
})
}, DEBOUNCE_TIME))
}, DEBOUNCE_TIME, {
leading: true,
trailing: true
}))
},
ondestroy () {
},
data: () => ({
component: null

1
routes/_components/VirtualListItem.html
View File

@ -8,7 +8,6 @@
.virtual-list-item {
position: absolute;
top: 0;
will-change: transform;
}
</style>
<script>

7
routes/_utils/virtualListStore.js
View File

@ -1,7 +1,5 @@
import { Store } from 'svelte/store.js'
const RENDER_BUFFER = 1000
class VirtualListStore extends Store {
}
@ -14,6 +12,7 @@ const virtualListStore = new VirtualListStore({
virtualListStore.compute('visibleItems',
['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
(items, scrollTop, height, itemHeights, innerHeight) => {
let renderBuffer = 2 * innerHeight
let visibleItems = []
let totalOffset = 0
let len = items.length
@ -26,11 +25,11 @@ virtualListStore.compute('visibleItems',
//console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
let isBelowViewport = (currentOffset < scrollTop)
if (isBelowViewport) {
if (scrollTop - RENDER_BUFFER > currentOffset) {
if (scrollTop - renderBuffer > currentOffset) {
continue // below the area we want to render
}
} else {
if (currentOffset > (scrollTop + innerHeight + RENDER_BUFFER)) {
if (currentOffset > (scrollTop + innerHeight + renderBuffer)) {
break // above the area we want to render
}
}

22
scss/global.scss
View File

@ -5,6 +5,11 @@ body {
line-height: 1.3;
color: var(--body-text-color);
background: var(--body-bg);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
#svelte {
@ -12,21 +17,30 @@ body {
flex-direction: column;
}
main {
overflow-x: hidden;
.container {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 72px;
left: 0;
right: 0;
bottom: 0;
will-change: transform; /* avoids "repaint on scroll" in Chrome */
}
main {
position: relative;
max-width: 600px;
padding: 15px 15px;
box-sizing: border-box;
margin: 85px auto 15px;
margin: 15px auto 15px;
background: var(--main-bg);
border: 1px solid var(--main-border);
border-radius: 1px;
@media (max-width: 767px) {
padding: 5px 5px;
margin: 75px auto 15px;
margin: 5px auto 15px;
}
}

2
templates/2xx.html
View File

@ -17,7 +17,7 @@
<style>
/* auto-generated w/ build-sass.js */
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--deemphasized-text-color:#666}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg)}#svelte{display:flex;flex-direction:column}main{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:600px;padding:15px 15px;box-sizing:border-box;margin:85px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:75px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}#svelte{display:flex;flex-direction:column}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;max-width:600px;padding:15px 15px;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
</style>