Fixed horizontally scrolling pages

This commit is contained in:
Eduard Urbach 2018-04-22 14:45:06 +02:00
parent e75c4d9a34
commit 7807aec249
3 changed files with 13 additions and 8 deletions

View File

@ -258,17 +258,20 @@ export default class AnimeNotifier {
}) })
element.onmouseenter = () => { element.onmouseenter = () => {
// if(element.dataset.offsetAssigned) {
// element.onmouseenter = null
// return
// }
Diff.mutations.queue(() => { Diff.mutations.queue(() => {
if(!contentRect) { if(!contentRect) {
contentRect = this.app.content.getBoundingClientRect() contentRect = this.app.content.getBoundingClientRect()
} }
// Dynamic label assignment to prevent label texts overflowing
// and taking horizontal space at page load.
element.dataset.label = element.getAttribute("aria-label")
// This is the most expensive call in this whole function,
// it consumes about 2-4 ms every time you call it.
let rect = element.getBoundingClientRect() let rect = element.getBoundingClientRect()
// Calculate offsets
let tipStyle = window.getComputedStyle(element, ":before") let tipStyle = window.getComputedStyle(element, ":before")
let tipWidth = parseInt(tipStyle.width) + parseInt(tipStyle.paddingLeft) * 2 let tipWidth = parseInt(tipStyle.width) + parseInt(tipStyle.paddingLeft) * 2
let tipStartX = rect.left + rect.width / 2 - tipWidth / 2 - contentRect.left let tipStartX = rect.left + rect.width / 2 - tipWidth / 2 - contentRect.left
@ -287,12 +290,15 @@ export default class AnimeNotifier {
let tipChild = document.createElement("div") let tipChild = document.createElement("div")
tipChild.classList.add("tip-offset-child") tipChild.classList.add("tip-offset-child")
tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) tipChild.setAttribute("data-label", element.getAttribute("data-label"))
tipChild.style.left = Math.round(leftOffset) + "px" tipChild.style.left = Math.round(leftOffset) + "px"
tipChild.style.width = rect.width + "px" tipChild.style.width = rect.width + "px"
tipChild.style.height = rect.height + "px" tipChild.style.height = rect.height + "px"
element.appendChild(tipChild) element.appendChild(tipChild)
} }
// Unassign event listener
element.onmouseenter = null
}) })
} }
} }

View File

@ -7,7 +7,6 @@
overflow-x hidden overflow-x hidden
overflow-y scroll overflow-y scroll
position relative position relative
// will-change transform
#columns #columns
horizontal horizontal

View File

@ -3,7 +3,7 @@ const tip-transform-hidden = translateX(-50%) translateY(-80%)
const tip-transform-visible = translateX(-50%) translateY(-100%) const tip-transform-visible = translateX(-50%) translateY(-100%)
mixin tip-before mixin tip-before
content attr(aria-label) content attr(data-label)
position absolute position absolute
top -10px top -10px
left 50% left 50%