Body Scroll Locking That Just Works with Everything

Body scroll lock

  This fork is maintained by Cosnova

Why BSL?

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).

Features:

  • disables body scroll WITHOUT disabling scroll of a target element
  • works on iOS mobile/tablet (!!)
  • works on Android
  • works on Safari desktop
  • works on Chrome/Firefox
  • works with vanilla JS and frameworks such as React / Angular / VueJS
  • supports nested target elements (eg. a modal that appears on top of a flyout)
  • can reserve scrollbar width
  • -webkit-overflow-scrolling: touch still works

Aren’t the alternative approaches sufficient?

  • the approach document.body.ontouchmove = (e) => { e.preventDefault(); return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg. modal).
  • the approach overflow: hidden on the body or html elements doesn’t work for all browsers
  • the position: fixed approach causes the body scroll to reset
  • some approaches break inertia/momentum/rubber-band scrolling on iOS

Install

$ yarn add body-scroll-lock

or

$ npm install body-scroll-lock

You can also load via a <script src="lib/bodyScrollLock.js"></script> tag (refer to the lib folder).

Usage examples

Common JS
// 1\. Import the functions
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;

// 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector('#someElementId');

// 3\. ...in some event handler after showing the target element...disable body scroll
disableBodyScroll(targetElement);

// 4\. ...in some event handler after hiding the target element...
enableBodyScroll(targetElement);
React/ES6
// 1\. Import the functions
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  targetElement = null;

  componentDidMount() {
    // 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = document.querySelector('#targetElementId');
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 3\. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 4\. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  };

  componentWillUnmount() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {
    return <div>some JSX to go here</div>;
  }
}
React/ES6 with Refs
// 1\. Import the functions
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  // 2\. Initialise your ref and targetElement here
  targetRef = React.createRef();
  targetElement = null;

  componentDidMount() {
    // 3\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = this.targetRef.current;
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 4\. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 5\. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  };

  componentWillUnmount() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {
    return (
      // 6\. Pass your ref with the reference to the targetElement to SomeOtherComponent
      <SomeOtherComponent ref={this.targetRef}>some JSX to go here</SomeOtherComponent>
    );
  }
}

// 7\. SomeOtherComponent needs to be a Class component to receive the ref (unless Hooks - https://reactjs.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component - are used).
class SomeOtherComponent extends React.Component {
  componentDidMount() {
    // Your logic on mount goes here
  }

  // 8\. BSL will be applied to div below in SomeOtherComponent and persist scrolling for the container
  render() {
    return <div>some JSX to go here</div>;
  }
}
Angular
import { Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";

// 1\. Import the functions
import {
  disableBodyScroll,
  enableBodyScroll,
  clearAllBodyScrollLocks
} from "body-scroll-lock";

@Component({
  selector: "app-scroll-block",
  templateUrl: "./scroll-block.component.html",
  styleUrls: ["./scroll-block.component.css"]
})
export class SomeComponent implements OnDestroy {
  // 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
  // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
  // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
  @ViewChild("scrollTarget") scrollTarget: ElementRef;

  showTargetElement() {
    // ... some logic to show target element

    // 3\. Disable body scroll
    disableBodyScroll(this.scrollTarget.nativeElement);
  }

  hideTargetElement() {
    // ... some logic to hide target element

    // 4\. Re-enable body scroll
    enableBodyScroll(this.scrollTarget.nativeElement);
  }

  ngOnDestroy() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }
}
Vanilla JS

In the html:

<head>
  <script src="some-path-where-you-dump-the-javascript-libraries/lib/bodyScrollLock.js"></script>
</head>

Then in the javascript:

// 1\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector('#someElementId');

// 2\. ...in some event handler after showing the target element...disable body scroll
bodyScrollLock.disableBodyScroll(targetElement);

// 3\. ...in some event handler after hiding the target element...
bodyScrollLock.enableBodyScroll(targetElement);

// 4\. Useful if we have called disableBodyScroll for multiple target elements,
// and we just want a kill-switch to undo all that.
bodyScrollLock.clearAllBodyScrollLocks();

Functions

Function Arguments Return Description
disableBodyScroll targetElement: HTMLElement
options: BodyScrollOptions void Disables body scroll while enabling scroll on target element
enableBodyScroll targetElement: HTMLElement void Enables body scroll and removing listeners on target element
clearAllBodyScrollLocks null void Clears all scroll locks

Options

reserveScrollBarGap

optional, default: false

If the overflow property of the body is set to hidden, the body widens by the width of the scrollbar. This produces an unpleasant flickering effect, especially on websites with centered content. If the reserveScrollBarGap option is set, this gap is filled by a padding-right on the body element. If disableBodyScroll is called for the last target element, or clearAllBodyScrollLocks is called, the padding-right is automatically reset to the previous value.

import { disableBodyScroll } from 'body-scroll-lock';
import type { BodyScrollOptions } from 'body-scroll-lock';

const options: BodyScrollOptions = {
  reserveScrollBarGap: true,
};

disableBodyScroll(targetElement, options);

allowTouchMove

optional, default: undefined

To disable scrolling on iOS, disableBodyScroll prevents touchmove events. However, there are cases where you have called disableBodyScroll on an element, but its children still require touchmove events to function.

See below for 2 use cases:

Simple
disableBodyScroll(container, {
  allowTouchMove: el => el.tagName === 'TEXTAREA',
});
More Complex

Javascript:

disableBodyScroll(container, {
  allowTouchMove: el => {
    while (el && el !== document.body) {
      if (el.getAttribute('body-scroll-lock-ignore') !== null) {
        return true;
      }

      el = el.parentElement;
    }
  },
});

Html:

<div id="container">
  <div id="scrolling-map" body-scroll-lock-ignore>
    ...
  </div>
</div>

References

https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177 https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi

Changelog

Refer to the releases page.

Download Details:

Author: cosnova

Source Code: https://github.com/cosnova/body-scroll-lock

#vue #vuejs #javascript

What is GEEK

Buddha Community

Body Scroll Locking That Just Works with Everything

brayden diego

1604559970

Just Eat Clone, Just Eat Clone Script, White-label Food Delivery App Solution

Food delivery apps are becoming inevitable with each passing day. The sheer convenience of enjoying favorite cuisines from desired restaurants in the comfort of our homes is steering a revolution in the sector. The market for food delivery services is growing, and new players are emerging with distinctive ideas. The emergence of clone apps has made it easier for budding startups to develop and launch the app within a restricted budget and limited time.

Are you an entrepreneur who wishes to launch a JustEat clone app? If so, you need to be wary of the crucial elements that can enable you to gain instant traction. This blog discusses such factors and their impact on your business’s success.

Work diligently on USPs: USPs are Unique Selling Propositions that can differentiate your platform from the rest. Unless and until you establish something unique, there’s no point for users to switch from existing apps to your app.

Have a user-friendly design: Complexity in app design can be the last thing you can expect during JustEat app like development. Hence, ensure that the design is simple, informative, and user-friendly, thereby engaging more audience.

Take care of your supply chain: Encompassing a wide range of restaurants with different cuisines is crucial to satisfy customers from different demographics. Moreover, ensure that you have an efficient delivery team by your side.

Cater to the glocal (global + local) audience: Having a multilingual and multi-currency support option enables you to gain a strong local base and establish a global presence concurrently.

Summing up,
Incorporate these aspects in your white-label JustEat clone, and witness a massive spike in customer engagement and profits in no time.

#just eat app like development #just eat clone #just eat clone app #just eat like app development #just eat clone script

brayden diego

1606115929

Just Eat Clone, Just Eat Clone Script, White-label Food Delivery App Solution

Any business solution that caters to customers’ convenience is deemed to sustain a spectacular success, and on-demand food delivery is one such silo that channelizes terrific returns and tremendous profitability. Customers no longer need to trail through tedious queues and jam-packed restaurants as they can savor their favorite food items at their home’s comfort.

At Turnkeytown, we confer you with a comprehensive food ordering app development- the Just Eat clone. Infused with world-class features and encircled around a superlative user interface. Capitalize on the flourishing sector by initiating your Just Eat Like App Development today. Connect with us to know more!

#just eat app like development #just eat clone #just eat clone app #just eat like app development #just eat clone script

Alice Cook

Alice Cook

1614329473

Fix: G Suite not Working | G Suite Email not Working | Google Business

G Suite is one of the Google products, developed form of Google Apps. It is a single platform to hold cloud computing, collaboration tools, productivity, software, and products. While using it, many a time, it’s not working, and users have a question– How to fix G Suite not working on iPhone? It can be resolved easily by restarting the device, and if unable to do so, you can reach our specialists whenever you want.
For more details: https://contactforhelp.com/blog/how-to-fix-the-g-suite-email-not-working-issue/

#g suite email not working #g suite email not working on iphone #g suite email not working on android #suite email not working on windows 10 #g suite email not working on mac #g suite email not syncing

Xfinity Stream Not Working?

Xfinity, the tradename of Comcast Cable Communications, LLC, is the first rate supplier of Internet, satellite TV, phone, and remote administrations in the United States. Presented in 2010, previously these administrations were given under the Comcast brand umbrella. Xfinity makes a universe of mind boggling amusement and innovation benefits that joins a great many individuals to the encounters and minutes that issue them the most. Since Xfinity is the greatest supplier of link administrations and home Internet in the United States, it isn’t amazing that the organization gets a ton of investigating and inquiry goal demands on its telephone based Xfinity Customer Service.

#my internet is not working comcast #comcast tv remote not working #my xfinity internet is not working #xfinity stream not working #xfinity wifi hotspot not working

Body Scroll Locking That Just Works with Everything

Body scroll lock

  This fork is maintained by Cosnova

Why BSL?

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).

Features:

  • disables body scroll WITHOUT disabling scroll of a target element
  • works on iOS mobile/tablet (!!)
  • works on Android
  • works on Safari desktop
  • works on Chrome/Firefox
  • works with vanilla JS and frameworks such as React / Angular / VueJS
  • supports nested target elements (eg. a modal that appears on top of a flyout)
  • can reserve scrollbar width
  • -webkit-overflow-scrolling: touch still works

Aren’t the alternative approaches sufficient?

  • the approach document.body.ontouchmove = (e) => { e.preventDefault(); return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg. modal).
  • the approach overflow: hidden on the body or html elements doesn’t work for all browsers
  • the position: fixed approach causes the body scroll to reset
  • some approaches break inertia/momentum/rubber-band scrolling on iOS

Install

$ yarn add body-scroll-lock

or

$ npm install body-scroll-lock

You can also load via a <script src="lib/bodyScrollLock.js"></script> tag (refer to the lib folder).

Usage examples

Common JS
// 1\. Import the functions
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;

// 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector('#someElementId');

// 3\. ...in some event handler after showing the target element...disable body scroll
disableBodyScroll(targetElement);

// 4\. ...in some event handler after hiding the target element...
enableBodyScroll(targetElement);
React/ES6
// 1\. Import the functions
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  targetElement = null;

  componentDidMount() {
    // 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = document.querySelector('#targetElementId');
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 3\. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 4\. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  };

  componentWillUnmount() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {
    return <div>some JSX to go here</div>;
  }
}
React/ES6 with Refs
// 1\. Import the functions
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  // 2\. Initialise your ref and targetElement here
  targetRef = React.createRef();
  targetElement = null;

  componentDidMount() {
    // 3\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = this.targetRef.current;
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 4\. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 5\. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  };

  componentWillUnmount() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {
    return (
      // 6\. Pass your ref with the reference to the targetElement to SomeOtherComponent
      <SomeOtherComponent ref={this.targetRef}>some JSX to go here</SomeOtherComponent>
    );
  }
}

// 7\. SomeOtherComponent needs to be a Class component to receive the ref (unless Hooks - https://reactjs.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component - are used).
class SomeOtherComponent extends React.Component {
  componentDidMount() {
    // Your logic on mount goes here
  }

  // 8\. BSL will be applied to div below in SomeOtherComponent and persist scrolling for the container
  render() {
    return <div>some JSX to go here</div>;
  }
}
Angular
import { Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";

// 1\. Import the functions
import {
  disableBodyScroll,
  enableBodyScroll,
  clearAllBodyScrollLocks
} from "body-scroll-lock";

@Component({
  selector: "app-scroll-block",
  templateUrl: "./scroll-block.component.html",
  styleUrls: ["./scroll-block.component.css"]
})
export class SomeComponent implements OnDestroy {
  // 2\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
  // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
  // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
  @ViewChild("scrollTarget") scrollTarget: ElementRef;

  showTargetElement() {
    // ... some logic to show target element

    // 3\. Disable body scroll
    disableBodyScroll(this.scrollTarget.nativeElement);
  }

  hideTargetElement() {
    // ... some logic to hide target element

    // 4\. Re-enable body scroll
    enableBodyScroll(this.scrollTarget.nativeElement);
  }

  ngOnDestroy() {
    // 5\. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }
}
Vanilla JS

In the html:

<head>
  <script src="some-path-where-you-dump-the-javascript-libraries/lib/bodyScrollLock.js"></script>
</head>

Then in the javascript:

// 1\. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
const targetElement = document.querySelector('#someElementId');

// 2\. ...in some event handler after showing the target element...disable body scroll
bodyScrollLock.disableBodyScroll(targetElement);

// 3\. ...in some event handler after hiding the target element...
bodyScrollLock.enableBodyScroll(targetElement);

// 4\. Useful if we have called disableBodyScroll for multiple target elements,
// and we just want a kill-switch to undo all that.
bodyScrollLock.clearAllBodyScrollLocks();

Functions

Function Arguments Return Description
disableBodyScroll targetElement: HTMLElement
options: BodyScrollOptions void Disables body scroll while enabling scroll on target element
enableBodyScroll targetElement: HTMLElement void Enables body scroll and removing listeners on target element
clearAllBodyScrollLocks null void Clears all scroll locks

Options

reserveScrollBarGap

optional, default: false

If the overflow property of the body is set to hidden, the body widens by the width of the scrollbar. This produces an unpleasant flickering effect, especially on websites with centered content. If the reserveScrollBarGap option is set, this gap is filled by a padding-right on the body element. If disableBodyScroll is called for the last target element, or clearAllBodyScrollLocks is called, the padding-right is automatically reset to the previous value.

import { disableBodyScroll } from 'body-scroll-lock';
import type { BodyScrollOptions } from 'body-scroll-lock';

const options: BodyScrollOptions = {
  reserveScrollBarGap: true,
};

disableBodyScroll(targetElement, options);

allowTouchMove

optional, default: undefined

To disable scrolling on iOS, disableBodyScroll prevents touchmove events. However, there are cases where you have called disableBodyScroll on an element, but its children still require touchmove events to function.

See below for 2 use cases:

Simple
disableBodyScroll(container, {
  allowTouchMove: el => el.tagName === 'TEXTAREA',
});
More Complex

Javascript:

disableBodyScroll(container, {
  allowTouchMove: el => {
    while (el && el !== document.body) {
      if (el.getAttribute('body-scroll-lock-ignore') !== null) {
        return true;
      }

      el = el.parentElement;
    }
  },
});

Html:

<div id="container">
  <div id="scrolling-map" body-scroll-lock-ignore>
    ...
  </div>
</div>

References

https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177 https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi

Changelog

Refer to the releases page.

Download Details:

Author: cosnova

Source Code: https://github.com/cosnova/body-scroll-lock

#vue #vuejs #javascript