Zero luck getting this to work

[minemindmedia]

Hopefully someone can help point me in the right direction. I am using the Sage 10 theme from Roots and I have a modal window that fires with AlpineJS and I just can't seem to get this to work.

Here's my app.js file:

/**
 * External Dependencies
 */
/**
 * External Dependencies
 */
import 'jquery';
import 'alpinejs';
import lozad from 'lozad';
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;

$(document).ready(() => {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 150){  
        $('nav').addClass("sticky");
    }
    else{
        $('nav').removeClass("sticky");
    }
  });
  // 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('#freequote');

  // 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);
});

const observer = lozad();
observer.observe();

Here's my modal blade view file:

<div
    x-show="quote"
    class="p-4 fixed flex justify-center items-center inset-0 bg-black bg-opacity-75 z-50"
    x-on:click.away="quote = false"
    x-transition:enter="transition ease-out duration-1000"
    x-transition:enter-start="opacity-0 transform"
    x-transition:enter-end="opacity-100 transform"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100 transform"
    x-transition:leave-end="opacity-0 transform"
>
    <div
        x-show="quote"
        @click.away="quote = false"
        x-on:click.away="quote = false"
        x-transition:enter="transition ease-out duration-1000"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
        class="relative w-1/2 bg-white border-4 border-blue-light p-12 rounded whitespace-nowrap z-50 overflow-y-scroll"
        id="freequote"
    >
    <button
        x-on:click.prevent="quote = false"
        class="outline-none focus:outline-none absolute top-0 right-0"
    >
        <svg class="h-12 w-12 text-gray-dark hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="flex flex-col">
        <h3 class="text-4xl text-left mb-4">Free Quote</h3>
        <p class="whitespace-normal pb-4 mb-8 border-b border-blue-500 text-left">For a free quote, please fill out and submit your details. One of our sales representatives will contact you soon.</p>
    </div>
    @include('forms.quote')
    </div>
    
</div>

My console doesn't throw any errors unless of course it can't find my #freequote ID, then the console displays: disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.

So that tells me the scripts are running but when my modal is open I am able to continue to scroll.

[diachedelic]

I am not familiar with the frameworks you mention, but it could be that your template is not yet rendered when you call disableBodyScroll.

[rick-liruixin]

希望有人能帮助我指明正确的方向。我使用的是Roots 的Sage 10主题，我有一个使用AlpineJS触发的模态窗口，但我似乎无法让它工作。

这是我的app.js文件：

/**
 * External Dependencies
 */
/**
 * External Dependencies
 */
import 'jquery';
import 'alpinejs';
import lozad from 'lozad';
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;

$(document).ready(() => {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 150){  
        $('nav').addClass("sticky");
    }
    else{
        $('nav').removeClass("sticky");
    }
  });
  // 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('#freequote');

  // 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);
});

const observer = lozad();
observer.observe();

这是我的模态刀片视图文件：

<div
    x-show="quote"
    class="p-4 fixed flex justify-center items-center inset-0 bg-black bg-opacity-75 z-50"
    x-on:click.away="quote = false"
    x-transition:enter="transition ease-out duration-1000"
    x-transition:enter-start="opacity-0 transform"
    x-transition:enter-end="opacity-100 transform"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100 transform"
    x-transition:leave-end="opacity-0 transform"
>
    <div
        x-show="quote"
        @click.away="quote = false"
        x-on:click.away="quote = false"
        x-transition:enter="transition ease-out duration-1000"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
        class="relative w-1/2 bg-white border-4 border-blue-light p-12 rounded whitespace-nowrap z-50 overflow-y-scroll"
        id="freequote"
    >
    <button
        x-on:click.prevent="quote = false"
        class="outline-none focus:outline-none absolute top-0 right-0"
    >
        <svg class="h-12 w-12 text-gray-dark hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="flex flex-col">
        <h3 class="text-4xl text-left mb-4">Free Quote</h3>
        <p class="whitespace-normal pb-4 mb-8 border-b border-blue-500 text-left">For a free quote, please fill out and submit your details. One of our sales representatives will contact you soon.</p>
    </div>
    @include('forms.quote')
    </div>
    
</div>

我的控制台不会抛出任何错误，除非它当然找不到我的#freequote ID，然后控制台显示： disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.

所以这告诉我脚本正在运行，但是当我的模式打开时，我可以继续滚动。

This framework only supports client-side use, and only after your dom is rendered They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log，Refer to the releases page.