javascript 锁定页面滚动

Posted 2021-05-03

  /**
   * Lock page scroll.
   *
   * Locks the page scroll so mobile menu takes over full screen and
   * user only scrolls through navigation menu.
   */
  function pageScrollLock() {
    var scrollPosition = [
      self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
      self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    var html = jQuery('html');
    html.data('scroll-position', scrollPosition);
    html.data('previous-overflow', '');
    html.css('overflow', 'hidden');
    html.addClass('scroll-locked');
    window.scrollTo(scrollPosition[1], scrollPosition[2]);
  }

  /**
   * Unlock page scroll.
   */
  function pageScrollUnlock() {
    var html = jQuery('html');
    var scrollPosition = html.data('scroll-position');
    html.css('overflow', html.data('previous-overflow'));
    html.removeClass('scroll-locked');
    window.scrollTo(scrollPosition[1], scrollPosition[2]);
  }

  /**
   * Change scroll lock state.
   */
  function pageScrollState() {
    if ($('html').hasClass('scroll-locked')) {
      pageScrollUnlock();
    }
    else {
      pageScrollLock();
    }
  }