fix: fix carousel and scrollbars for edge browser (#952)

This commit is contained in:
Nolan Lawson 2019-02-09 12:01:29 -08:00 committed by GitHub
parent 180055da70
commit 73eb9fba2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 4 deletions

View File

@ -40,6 +40,7 @@
.shortcut-help-info { .shortcut-help-info {
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none;
} }
.shortcut-help-info::-webkit-scrollbar { .shortcut-help-info::-webkit-scrollbar {
display: none; display: none;

View File

@ -95,6 +95,7 @@
width: 100%; width: 100%;
flex: 1; flex: 1;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none;
} }
.media-scroll::-webkit-scrollbar { .media-scroll::-webkit-scrollbar {
@ -180,7 +181,7 @@
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog' import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import debounce from 'lodash-es/debounce' import debounce from 'lodash-es/debounce'
import times from 'lodash-es/times' import times from 'lodash-es/times'
import { smoothScroll } from '../../../_utils/smoothScroll' import { smoothScroll, hasNativeSmoothScroll } from '../../../_utils/smoothScroll'
import { doubleRAF } from '../../../_utils/doubleRAF' import { doubleRAF } from '../../../_utils/doubleRAF'
import { store } from '../../../_store/store' import { store } from '../../../_store/store'
import { import {
@ -277,7 +278,13 @@
let { scrollWidth } = scroller let { scrollWidth } = scroller
let scrollLeft = Math.floor(scrollWidth * (scrolledItem / length)) let scrollLeft = Math.floor(scrollWidth * (scrolledItem / length))
if (smooth) { if (smooth) {
if (!hasNativeSmoothScroll && 'StyleMedia' in window) {
// Edge has a weird bug where it changes the height if we try to
// smooth scroll, so disable smooth scrolling
scroller.scrollLeft = scrollLeft
} else {
smoothScroll(scroller, scrollLeft, true) smoothScroll(scroller, scrollLeft, true)
}
} else { } else {
scroller.scrollLeft = scrollLeft scroller.scrollLeft = scrollLeft
} }

View File

@ -59,10 +59,10 @@ function testSupportsSmoothScroll () {
return supports return supports
} }
const smoothScrollSupported = process.browser && testSupportsSmoothScroll() export const hasNativeSmoothScroll = process.browser && testSupportsSmoothScroll()
export function smoothScroll (node, topOrLeft, horizontal) { export function smoothScroll (node, topOrLeft, horizontal) {
if (smoothScrollSupported) { if (hasNativeSmoothScroll) {
return node.scrollTo({ return node.scrollTo({
[horizontal ? 'left' : 'top']: topOrLeft, [horizontal ? 'left' : 'top']: topOrLeft,
behavior: 'smooth' behavior: 'smooth'