主页 / 问题 / 1035533
Accepted
Алексей
Asked:2020-10-17 10:25:30 +0000 UTC2020-10-17 10:25:30 +0000 UTC

在整页插件中禁用时如何在内部元素中保留滚动？

  • 772

整个页面是在fullpage插件上制作的。该页面有模态窗口，里面有滚动的块。现在，当打开一个模态窗口时，我相应地用 方法阻止了页面的滚动setAllowScrolling()，但是有了它，鼠标上的滚动通常被禁用，是否有可能以某种方式绕过这个时刻？

ps 尝试调用该方法destroy('all')，但正如预期的那样，一切都被重置并且页面滚动到最开始

const myFullpage = new fullpage('#fullpage', {});

$('.modal').on('show.bs.modal', () => {
  setTimeout(() => {
    myFullpage.setAllowScrolling(false);
  }, 10);
});

$('.modal').on('hide.bs.modal', () => {
  myFullpage.setAllowScrolling(true);
});
.section {
  text-align:center;
  font-size: 3em;
}

p {
  height: 200px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/dist/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="fullpage">
    <div class="section">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Запустить модальное окно
      </button>
    </div>
    <div class="section">
        <div class="slide" data-anchor="slide1">Two 1</div>
        <div class="slide" data-anchor="slide2">Two 2</div>
    </div>
    <div class="section">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Запустить модальное окно
      </button>
    </div>
    <div class="section">Four</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, maiores! Quod eligendi distinctio, corporis dignissimos doloribus qui neque ipsum non magni, adipisci suscipit ullam sapiente facere odit? Atque, praesentium necessitatibus?
    Quam tenetur eaque, deserunt accusamus labore sunt ab! Provident tempora veritatis facere quibusdam ea a nam accusamus voluptas? Accusantium id ipsa omnis accusamus ab aliquid perspiciatis recusandae ipsum corporis dolor.
    Distinctio fugit esse enim hic consectetur fuga et perspiciatis corrupti tempora dolore nam officia nihil saepe quibusdam illum vero, sequi autem accusantium aliquid voluptatem iusto possimus minima iste architecto? Fugit.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript

2 个回答

  1. Best Answer

    从文档中使用的属性normalScrollElements

    const myFullpage = new fullpage('#fullpage', {
    normalScrollElements: '.modal',
});
    • 3

  2. 尝试 bind 和 unbind 方法或 preventdefault 和 stopPropagation 事件来阻止和解除阻止所需的元素。

    可能您的框架使用类似的方法。您可以在 body 元素中禁用滚动，然后通过溢出恢复或添加元素的异常

    您还可以为模态窗口添加溢出隐藏

        $("#Modal").css("overflow", "hidden");

    或 $('body').bind('scroll', function(e){e.preventDefault()}) $('body').unbind('scroll')

    尽管如此，我还是去了框架的网站。我尝试了应该解决问题的前两种方法。normalScrollElements 和 fixedElements 最后一个为我解决了这个问题：它表示什么仍然是固定的。

    经过多次尝试以不同的方式解决它，例如将窗口位置设置为零，我去阅读手册，留下了几个复杂且不正确的方法，并部分解决了原生 js 方法的问题。所以在女士的情况下，通过框架本身解决问题要容易得多。新解决方案：

    https://jsfiddle.net/reu5jft7/1/

         const myFullpage = new fullpage('#fullpage', {
     fixedElements: 'body',
 });

 $('.modal').on('show.bs.modal', () => {
   setTimeout(() => {

   }, 10);
 });

 $('.modal').on('hide.bs.modal', () => {
   myFullpage.setAllowScrolling(true);
 });
    • 1

相关问题