Skip to content

Commit

Permalink
Remove disableBodyScroll / enableBodyScroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@j3ll3yfi5h
j3ll3yfi5h committed Jul 28, 2022
1 parent 45405c0 commit 516da11
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions src/scripts/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// uncomment for packing
// import "../styles/index.scss";
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
// import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";

class ImageCompare {
constructor(el, settings = {}) {
Expand Down Expand Up @@ -64,8 +64,8 @@ class ImageCompare {
// Desktop events
this.el.addEventListener("mousedown", (ev) => {
this._activate(true);
document.body.classList.add("icv__body");
disableBodyScroll(this.el, {reserveScrollBarGap: true});
// document.body.classList.add("icv__body");
// disableBodyScroll(this.el, {reserveScrollBarGap: true});
this._slideCompare(ev);
});
this.el.addEventListener(
Expand All @@ -75,26 +75,26 @@ class ImageCompare {

this.el.addEventListener("mouseup", () => this._activate(false));
document.body.addEventListener("mouseup", () => {
document.body.classList.remove("icv__body");
enableBodyScroll(this.el);
// document.body.classList.remove("icv__body");
// enableBodyScroll(this.el);
this._activate(false);
});

// Mobile events

this.control.addEventListener("touchstart", (e) => {
this._activate(true);
document.body.classList.add("icv__body");
disableBodyScroll(this.el, {reserveScrollBarGap: true});
// document.body.classList.add("icv__body");
// disableBodyScroll(this.el, {reserveScrollBarGap: true});
});

this.el.addEventListener("touchmove", (ev) => {
this.active && this._slideCompare(ev);
});
this.el.addEventListener("touchend", () => {
this._activate(false);
document.body.classList.remove("icv__body");
enableBodyScroll(this.el);
// document.body.classList.remove("icv__body");
// enableBodyScroll(this.el);
});

// hover
Expand Down

1 comment on commit 516da11

@kylewetton
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will break the image viewer on mobile, the body scroll lock is intended to get around conflicting touch events.

I've tested the latest build on devices on my end and this works, not sure how I can help with reports of it not working

disableBodyScroll(this.el, {reserveScrollBarGap: true});

I'd recommend a setting that disables it instead, and happy for a PR to merge if you have time to make that change

Please sign in to comment.