javascript - 限制同一页面内垂直/水平的滚动方向

Question

我正在尝试完成从垂直滚动到水平滚动的相同切换 here .

但是，当两个部分都在 View 中时在水平部分上滚动将启用水平滚动。有没有办法只在垂直部分不可见时启用水平滚动并限制垂直滚动？为尴尬的措辞道歉；本质上，我希望只有在白色部分已经不在视野中时才滚动到红色部分。

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
    if (scrollTop >= 1000){
      $("html, body").mousewheel(function(event, delta) {
          this.scrollLeft -= (delta * 30);
          $("html,body").toggleClass("disable-scroll");
       });
    }
});

#outsidescrollwrapper{
	width: 100vh;
	height: 100vw;
	transform: rotate(-90deg) translateX(-100vh);
	transform-origin: top left;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
}
::-webkit-scrollbar {
	display: none;
}
.sidescrollwrapper{
	display: flex;
	flex-direction: row;
	width: 200vw;
	transform: rotate(90deg) translateY(-100vh);
	transform-origin: top left;
}
.sidescrollwrapper > .sidescroll {
	width: 100vw;
	height: 100vh;
}
#about{
  height: 1000px;
	background: linear-gradient(to bottom, #FBFDFF, white);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about">
</div>
<div id="outsidescrollwrapper">
	<div class="sidescrollwrapper">
		<div style="background-color:blue" class="sidescroll"></div>
		<div style="background-color:red" class="sidescroll"></div>
	</div>
</div>

https://jsfiddle.net/1h4yeac0/

Answer 1

我在下面编写了这个片段，它观察使用 data-direction 属性的元素。这些属性的值可以是你想要的任何值，但我选择给它们 horizo​​ntal 或 vertical 值，这可能是你可以使用的滚动方向。

这只会监控您使用selector 参数查询的元素，不会改变滚动方向。我留给你处理的那部分。

回调 将在视口(viewport)中只有 1 个 observerd 元素时触发(我相信这正是您所要求的) .该回调有一个参数，它是当前方向值。根据该值，您可以切换滚动方向。

我希望这对你有帮助，伙计。

/**
 * Observes elements that indicate the current 
 * scroll-direction based on a data-direction attribute.
 * The callbacks fires with the current direction whenever 
 * a single observed element is in view.
 *
 * @param {string} selector
 * @param {function} callback
 * @returns {IntersectionObserver}
 */
function directionObserver(selector, callback) {

  /**
   * Store elements that are in view in a Set and 
   * set the default direction.
   */
  const elementsInView = new Set();
  let currentDirection = 'vertical';

  /**
   * Callback that runs whenever observed
   * elements intersect.
   *
   * @param {IntersectionObserverEntry[]} entries
   */
  const intersectionCallback = entries => {

    /**
     * Check if current entries are in view.
     * If they are add them to the elementsInView array
     * and remove them if they are not.
     */
    entries.forEach(entry => {
      const { target } = entry;
      if (entry.isIntersecting) {
        elementsInView.add(target);
      } else {
        elementsInView.delete(target);
      }
    });

    /**
     * Whenever there is only one element in the view
     * switch the currentDirection to the value of the
     * direction data attribute.
     */
    if (elementsInView.size === 1) {
      for (const element of elementsInView.values()) {
        currentDirection = element.dataset.direction;
        if ('function' === typeof callback) {
          callback(currentDirection);
        }
      }
    }

  }

  /**
   * Options for the observer
   */
  const options = {
    root: null,
    rootMargin: '50px 0px',
    threshold: [0, 1]
  };

  /**
   * Create observer
   */
  const observer = new IntersectionObserver(intersectionCallback, options);

  /**
   * Observer elements based on the selector argument
   */
  const sections = document.querySelectorAll(selector);
  sections.forEach(section => observer.observe(section));
  
  return currentDirection;
  
}

// Use the observer and observe all the .section elements.
directionObserver('.section', direction => {
  console.log(`Current direction is: ${direction}`);
  // Change scroll direction based on direction value.
});

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  display: block;
  height: 100vh;
  margin: 50px 0;
}

.vertical {
  width: 100%;
  background: repeating-linear-gradient(
    0deg, 
    white, 
    white 50px, 
    red 50px, 
    red 100px
   );
}

.horizontal {
  width: 300vw;
  background: repeating-linear-gradient(
    90deg, 
    white, 
    white 50px, 
    blue 50px, 
    blue 100px
   );
}

<div class="section vertical" data-direction="vertical"></div>
<div class="section horizontal" data-direction="horizontal"></div>