fix(ui/sticky): use scroll mode as sticky default mode

affects: @varlet/ui
varletjs · Sep 17, 2021 · 3769f8b · 3769f8b
1 parent ae28ce2
commit 3769f8b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 16 deletions.
diff --git a/packages/varlet-ui/src/sticky/Sticky.vue b/packages/varlet-ui/src/sticky/Sticky.vue
@@ -2,6 +2,7 @@
   <div
     class="var-sticky"
     ref="stickyEl"
+    :class="[cssMode ? 'var-sticky--css-mode' : null]"
     :style="{
       zIndex: toNumber(zIndex),
       top: !isFixed ? `${offsetTop}px` : null,
@@ -66,10 +67,10 @@ export default defineComponent({
       const sticky = stickyEl.value as HTMLElement
       const { top: stickyTop, left: stickyLeft } = sticky.getBoundingClientRect()
       const currentOffsetTop = stickyTop - scrollerTop
-      const { onScroll } = props
+      const { onScroll, cssMode } = props
 
       if (currentOffsetTop <= offsetTop.value) {
-        if (!isSupportCSSSticky) {
+        if (!isSupportCSSSticky || !cssMode) {
           fixedWidth.value = `${sticky.offsetWidth}px`
           fixedHeight.value = `${sticky.offsetHeight}px`
           fixedTop.value = `${scrollerTop + offsetTop.value}px`

diff --git a/packages/varlet-ui/src/sticky/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/sticky/__tests__/__snapshots__/index.spec.js.snap
@@ -23,14 +23,14 @@ exports[`test sticky example 1`] = `
 `;
 
 exports[`test sticky scrolling with css sticky position 1`] = `
-"<div class=\\"var-sticky\\" style=\\"z-index: 10; top: 100px;\\">
+"<div class=\\"var-sticky var-sticky--css-mode\\" style=\\"z-index: 10; top: 100px;\\">
   <div class=\\"var-sticky__wrapper\\" style=\\"z-index: 10;\\">sticky content</div>
 </div>"
 `;
 
 exports[`test sticky scrolling with css sticky position 2`] = `
-"<div class=\\"var-sticky\\" style=\\"z-index: 10; width: 0px; height: 0px;\\">
-  <div class=\\"var-sticky__wrapper\\" style=\\"z-index: 10; position: fixed; width: 0px; height: 0px; top: 100px;\\">sticky content</div>
+"<div class=\\"var-sticky var-sticky--css-mode\\" style=\\"z-index: 10; top: 100px;\\">
+  <div class=\\"var-sticky__wrapper\\" style=\\"z-index: 10;\\">sticky content</div>
 </div>"
 `;
 

diff --git a/packages/varlet-ui/src/sticky/__tests__/index.spec.js b/packages/varlet-ui/src/sticky/__tests__/index.spec.js
@@ -49,18 +49,24 @@ test('test sticky onScroll', async () => {
 })
 
 test('test sticky scrolling with css sticky position', async () => {
+  const mockGetComputedStyle = jest
+    .spyOn(window, 'getComputedStyle')
+    .mockReturnValue({ position: 'sticky' })
+
   const wrapper = mount(VarSticky, {
     props: {
       offsetTop: 100,
+      cssMode: true
     },
     slots: {
       default: () => 'sticky content',
     },
     attachTo: document.body,
   })
 
-  const mockGetComputedStyle = jest.spyOn(window, 'getComputedStyle').mockReturnValue({ position: 'sticky' })
-  const mockGetBoundingClientRect = jest.spyOn(wrapper.element, 'getBoundingClientRect').mockReturnValue({ top: 200 })
+  const mockGetBoundingClientRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({ top: 200 })
   await trigger(window, 'scroll')
   expect(wrapper.html()).toMatchSnapshot()
 
@@ -76,6 +82,10 @@ test('test sticky scrolling with css sticky position', async () => {
 })
 
 test('test sticky scrolling without css sticky position', async () => {
+  const mockGetComputedStyle = jest
+    .spyOn(window, 'getComputedStyle')
+    .mockReturnValue({ position: 'relative' })
+
   const wrapper = mount(VarSticky, {
     props: {
       offsetTop: 100,
@@ -86,16 +96,16 @@ test('test sticky scrolling without css sticky position', async () => {
     attachTo: document.body,
   })
 
-  const mockGetComputedStyle = jest.spyOn(window, 'getComputedStyle').mockReturnValue({ position: 'relative' })
-  const mockGetBoundingClientRect = jest.spyOn(wrapper.element, 'getBoundingClientRect').mockReturnValue({
-    top: 200,
-  })
+  const mockGetBoundingClientRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({ top: 200 })
+
   await trigger(window, 'scroll')
   expect(wrapper.html()).toMatchSnapshot()
 
-  jest.spyOn(wrapper.element, 'getBoundingClientRect').mockReturnValue({
-    top: 100,
-  })
+  jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({ top: 100 })
   await trigger(window, 'scroll')
   expect(wrapper.html()).toMatchSnapshot()
 

diff --git a/packages/varlet-ui/src/sticky/docs/en-US.md b/packages/varlet-ui/src/sticky/docs/en-US.md
@@ -55,6 +55,7 @@ createApp().use(Sticky)
 | --- | --- | --- | --- | 
 | `offset-top` | Sticky offset top | _string \| number_ | `0` |
 | `z-index` | Sticky z-index | _string \| number_ | `0` |
+| `css-mode` | Enable native `css sticky` mode | _boolean_ | `false` |
 
 ### Events
 

diff --git a/packages/varlet-ui/src/sticky/docs/zh-CN.md b/packages/varlet-ui/src/sticky/docs/zh-CN.md
@@ -54,6 +54,7 @@ createApp().use(Sticky)
 | --- | --- | --- | --- | 
 | `offset-top` | 吸顶距离 | _string \| number_ | `0` |
 | `z-index` | 吸顶时的层级 | _string \| number_ | `0` |
+| `css-mode` | 开启原生`css sticky`模式 | _boolean_ | `false` |
 
 ### 事件
 

diff --git a/packages/varlet-ui/src/sticky/props.ts b/packages/varlet-ui/src/sticky/props.ts
@@ -9,6 +9,10 @@ export const props = {
     type: [String, Number],
     default: 10,
   },
+  cssMode: {
+    type: Boolean,
+    default: false,
+  },
   onScroll: {
     type: Function as PropType<(offsetTop: number, isFixed: boolean) => void>,
   },

diff --git a/packages/varlet-ui/src/sticky/sticky.less b/packages/varlet-ui/src/sticky/sticky.less
@@ -1,4 +1,6 @@
 .var-sticky {
-  position: sticky;
-  position: -webkit-sticky;
+  &--css-mode {
+    position: sticky;
+    position: -webkit-sticky;
+  }
 }