fix: fix carousel and scrollbars for edge browser (#952)
This commit is contained in:
parent
180055da70
commit
73eb9fba2c
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
|
|
Loading…
Reference in New Issue