Set paddingRight to scrollbar width when menu is open

src/scripts/basicContext.js

@@ -1,4 +1,5 @@
-let overflow = null
+let originalBodyStyle = null
+let scrollBarWidth
 
 const ITEM      = 'item',
       SEPARATOR = 'separator'
@@ -9,6 +10,17 @@ const dom = function(elem = '') {
 
 }
 
+const getScrollbarWidth = () => { // taken from twbs/bootstrap
+	const scrollDiv = document.createElement('div')
+	scrollDiv.className = 'scrollbar-width-measure'
+	document.body.appendChild(scrollDiv)
+	const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
+	document.body.removeChild(scrollDiv)
+	return scrollbarWidth
+}
+
+scrollBarWidth = getScrollbarWidth();
+
 const valid = function(item = {}) {
 
 	let emptyItem = (Object.keys(item).length===0 ? true : false)
@@ -189,10 +201,11 @@ const show = function(items, e, fnClose, fnCallback) {
 	// Add context to the body
 	document.body.insertAdjacentHTML('beforeend', html)
 
-	// Save current overflow and block scrolling of site
-	if (overflow==null) {
-		overflow = document.body.style.overflow
+	// Save current body style and block scrolling of site
+	if (!originalBodyStyle) {
+		originalBodyStyle = { overflow: document.body.style.overflow, paddingRight: document.body.style.paddingRight }
 		document.body.style.overflow = 'hidden'
+		document.body.style.paddingRight = scrollBarWidth + 'px'
 	}
 
 	// Cache the context
@@ -245,10 +258,11 @@ const close = function() {
 
 	container.parentElement.removeChild(container)
 
-	// Reset overflow to its original value
-	if (overflow!=null) {
-		document.body.style.overflow = overflow
-		overflow = null
+	// Reset original body style
+	if (originalBodyStyle) {
+		document.body.style.overflow = originalBodyStyle.overflow
+		document.body.style.paddingRight = originalBodyStyle.paddingRight
+		originalBodyStyle = null
 	}
 
 	return true
@@ -261,4 +275,4 @@ return {
 	show,
 	visible,
 	close
-}
+}