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

Fix scrollTop jiggle in Firefox (#94) 

Fixes #64
This commit is contained in:
Nolan Lawson 2018-04-12 19:58:18 -07:00 committed by GitHub
parent 3786473e34
commit 7853285eea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
routes/_utils/autosize.js
View File

@ -15,6 +15,8 @@ function assign (ta) {
return return
} }
// TODO: hack - grab our scroll container so we can maintain the scrollTop
let container = document.getElementsByClassName('container')[0]
let heightOffset = null let heightOffset = null
let cachedHeight = null let cachedHeight = null
@ -39,10 +41,11 @@ function assign (ta) {
function _resize () { function _resize () {
const originalHeight = ta.style.height const originalHeight = ta.style.height
const scrollTop = container.scrollTop
ta.style.height = '' ta.style.height = '' // this may change the scrollTop in Firefox
let endHeight = ta.scrollHeight + heightOffset const endHeight = ta.scrollHeight + heightOffset
if (ta.scrollHeight === 0) { if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM. // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
@ -51,6 +54,7 @@ function assign (ta) {
} }
ta.style.height = endHeight + 'px' ta.style.height = endHeight + 'px'
container.scrollTop = scrollTop // Firefox jiggles if we don't reset the scrollTop of the container
return endHeight return endHeight
} }
@ -76,7 +80,7 @@ function assign (ta) {
} }
} }
const pageResize = debounce(update, 1000) const pageResize = debounce(() => requestAnimationFrame(update), 1000)
const destroy = () => { const destroy = () => {
window.removeEventListener('resize', pageResize, false) window.removeEventListener('resize', pageResize, false)