Почему опция fullPage.js "normalScrollElements" не работает при повторной прокрутке? - PullRequest
Новая
       27

Почему опция fullPage.js "normalScrollElements" не работает при повторной прокрутке?

0 голосов
/ 21 марта 2019

У меня есть прокручиваемый контейнер внутри нескольких fullPage.js sections.

Эти контейнеры имеют position: absolute и занимают все пространство section.

Внутри есть некоторый контент, который не занимает 100% height и width (из-за padding для родителя и max-width для самого себя).

Теперь, когда вы прокручиваете этот контейнер в первый раз, он работает как положено. Но когда вы пытаетесь прокрутить второй раз, это работает только тогда, когда мышь находится над внутренним элементом контента (тот, что с красной рамкой в ​​codenippet). Если прокрутить окно за пределами этого поля, ничего не произойдет.

Я также попытался добавить цвет фона в прокручиваемый контейнер, но безуспешно.

У меня такое же поведение при использовании последней Firefox 65, а также Safari 11 на macOS. 

$('#fullpage').fullpage({
	sectionsColor: ['yellow', 'green', 'purple', 'orange'],
  normalScrollElements: '.test'
});

fullpage_api.setAllowScrolling(false);
.test {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 50px 0;
  background: rgba(255, 255, 255, 0.5);
}

.test-content {
  max-width: 200px;
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" rel="stylesheet"/>

<div id="fullpage">
  <div class="section">
    <div class="test">
      <div class="test-content">
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        End of Section 1
      </div>
    </div>
  </div>
  
  <div class="section">
    <div class="test">
      <div class="test-content">         
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        End of Section 1
      </div>
    </div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
</div>

Вот также скрипка .

Я пропустил настройку? Это по замыслу? это ошибка?

...