@afeefa/vue-app 0.0.152 → 0.0.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- 0.0.152
1
+ 0.0.153
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.152",
3
+ "version": "0.0.153",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -32,6 +32,7 @@ import { getZIndex } from 'vuetify/lib/util/helpers'
32
32
  })
33
33
  export default class FlyingContextContainer extends Vue {
34
34
  visible = false
35
+ oldOverflowY = null
35
36
 
36
37
  mounted () {
37
38
  this.mutationWatcher = new MutationObserver(this.domChanged)
@@ -40,14 +41,39 @@ export default class FlyingContextContainer extends Vue {
40
41
  window.addEventListener('mousedown', this.onClickOutside)
41
42
  }
42
43
 
44
+ getScrollbarWidth () {
45
+ const el = document.documentElement
46
+ const overflowY = getComputedStyle(el)['overflow-y']
47
+ if (overflowY === 'scroll' || (overflowY === 'auto' && el.scrollHeight > el.clientHeight)) {
48
+ // measure scrollbar width https://stackoverflow.com/a/55278118
49
+ const scrollbox = document.createElement('div')
50
+ scrollbox.style.overflow = 'scroll'
51
+ document.body.appendChild(scrollbox)
52
+ const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth
53
+ document.body.removeChild(scrollbox)
54
+ return scrollBarWidth
55
+ }
56
+ return 0
57
+ }
58
+
59
+
43
60
  domChanged () {
44
61
  const container = this.getChildrenContainer()
45
62
  this.visible = !!container.children.length
46
63
 
64
+ const el = document.documentElement
65
+
47
66
  if (this.visible) {
48
- document.documentElement.style.overflow = 'hidden'
67
+ const style = getComputedStyle(el)
68
+ this.oldOverflowY = style.overflowY
69
+ const scrollbarWidth = this.getScrollbarWidth()
70
+ setTimeout(() => {
71
+ el.style.overflowY = 'hidden'
72
+ el.style.marginRight = scrollbarWidth + 'px'
73
+ }, 100)
49
74
  } else {
50
- document.documentElement.style.overflow = 'auto'
75
+ el.style.overflowY = this.oldOverflowY
76
+ el.style.marginRight = 0
51
77
  }
52
78
  }
53
79
 
@@ -1,3 +1,7 @@
1
+ html {
2
+ overflow-y: auto; // ress.css • v2.0.4 sets overflow-y: scroll
3
+ }
4
+
1
5
  .container {
2
6
  padding: 0;
3
7
  }