Как переместить содержимое в полноэкранном режиме просмотра страницы на следующий и обратно? - PullRequest
Новая
       21

Как переместить содержимое в полноэкранном режиме просмотра страницы на следующий и обратно?

0 голосов
/ 19 января 2019

У меня есть рабочий код, который отлично работает, когда я перемещаю один контент в другой и обратно.Проблема в том, когда я хочу снова перейти к следующему.Тогда он перестает работать.Я считаю, что это как-то связано с отключением события click.Я проверяю, в каком окне просмотра находится мой слайд.Затем я проверяю, прокручиваю ли я вверх или вниз.Это работает, когда я прокручиваю вниз, затем вверх и затем, когда я хочу снова скользить вниз, он перестает работать?

Мой код: 

  function slidePeople() {
    const elementTarget = document.getElementById('content');
    const elementHeight = window.innerHeight;
    const base = elementHeight / 100;
    const innerWrapper = document.getElementById('inner-sidebar');

    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    // console.log(viewportHeight);

    // let disableClick = false;
    const link = document.getElementById('2');
    const link2 = document.getElementById('3');
    const linkTop = document.getElementById('1');
    window.addEventListener('scroll', () => {
      window.onscroll = slideMenu;

      // offsetTop - the distance of the current element relative to the top;
      if (window.scrollY > elementTarget.offsetTop) {
        const scrolledPx = (window.scrollY - elementTarget.offsetTop);

        /* F I R S T   STEP  going forward one step */
        if (scrolledPx < viewportHeight) {

          // Initial state
          let scrollPos = 0;
          window.addEventListener('scroll', () => {
            if ((document.body.getBoundingClientRect()).top > scrollPos) { // UP
              console.log('up');

              if (linkTop.stopclik === undefined) {
                linkTop.click();
                linkTop.stopclik = true;
              }
            } else { 
              console.log('down');
              if (link.stopclik === undefined) {
                link.click();
                link.stopclik = true;
              }
            }
            scrollPos = (document.body.getBoundingClientRect()).top;
          }); 
        }

        /* S E C O N D  S T E P */
        if (viewportHeight < scrolledPx && (viewportHeight * 2) > scrolledPx) {
          console.log('section two in viewport');

          if (link2.stopclik === undefined) {
            link2.click();
            link2.stopclik = true;            
          }

          // Initial state
          let scrollPos = 0;
          window.addEventListener('scroll', () => {
            if ((document.body.getBoundingClientRect()).top > scrollPos) { // UP
              console.log('up');

              if (link.stopclik === undefined) {
                linkTop.click();
                linkTop.stopclik = true;
              }
            } else { 
              console.log('down');
            }
            // saves the new position for iteration.
            scrollPos = (document.body.getBoundingClientRect()).top;
          }); 
        }

        /* THIRD STEP */
        if ((viewportHeight * 2) < scrolledPx && (viewportHeight * 3) > scrolledPx) {
          console.log('section three');
        }

        const moveInPercent = scrolledPx / base;
        const move = -1 * (moveInPercent);

        innerWrapper.style.transform = `translate(${move}%)`;
      }
    });
  }

  window.onscroll = slidePeople;

Я был бы очень признателен за любую помощь, как решить эту проблемувопрос.Я застрял на этом и не знаю, как это решить.

...