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

我正试图实现从垂直滚动到水平滚动的相同切换

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

$window.scroll函数{ var scrollTop=$window.scrollTop； 如果scrollTop>=1000{ $html，body.mousewheelfunctionevent，增量{ this.scrollLeft-=delta*30； $html，body.toggleClassdisable-scroll； }; } }; 外包装{ 宽度：100vh； 高度：100vw； 变换：旋转-90度translateX-100vh； 变换原点：左上角； 溢出y：滚动； 溢出x：隐藏； 位置：绝对位置； } ：-webkit滚动条{ 显示：无； } .侧卷轴包装器{ 显示器：flex； 弯曲方向：行； 宽度：200vw； 变换：旋转90度平移Y-100vh； 变换原点：左上角； } .sidescrollwrapper>.sidescroll{ 宽度：100vw； 高度：100vh； } 关于{ 高度：1000px； 背景：线性渐变至底部，FBFDFF，白色； }

---

我在下面写了这个片段，它观察使用数据方向属性的元素。这些属性上的值可以是您想要的任何值，但我选择给它们水平或垂直值，这可能是您可以使用的滚动方向

这将只监视使用选择器参数查询的元素，不会更改滚动方向。我留给你处理的那部分

只要视口中只有1个observer元素（我相信这是您所请求的），就会触发回调。该回调具有一个参数，该参数是当前方向值。根据该值，您可以切换滚动方向

我希望这能帮到你，伙计

/** *观察指示电流的元素 *基于数据方向属性的滚动方向。 *无论何时，回调都以当前方向触发 *一个观察到的元素就在眼前。 * *@param{string}选择器 *@param{function}回调 *@returns{IntersectionObserver} */ 函数directionObserverselector，回调{ /** *将视图中的图元存储在集合中，然后 *设置默认方向。 */ const elementsInView=新集合； 设currentDirection=‘垂直’； /** *只要观察到就运行的回调 *元素相交。 * *@param{IntersectionObserverEntry[]}项 */ const intersectionCallback=条目=>{ /** *检查当前条目是否在视图中。 *如果是，请将其添加到elementsInView数组中 *如果没有，请将其移除。 */ entries.forEachentry=>{ 常量{target}=entry； if entry.isIntersecting{ elementsInView.addtarget； }否则{ elementsInView.deletetarget； } }; /** *当视图中只有一个图元时 *将currentDirection切换到 *方向数据属性。 */ 如果元素sinview.size==1{ 对于elementsInView.values的常量元素{ currentDirection=element.dataset.direction； 如果“函数”==回调类型{ 回调电流方向； } } } } /** *观察员的选择 */ 常量选项={ root:null， rootMargin:'50px 0px'， 阈值：[0，1] }; /** *创建观察者 */ const observer=新的IntersectionObserverintersectionCallback，选项； /** *基于选择器参数的观察者元素 */ const sections=document.queryselector或allselector； sections.forEachsection=>observer.observesection； 回流方向； } //使用观察者观察所有.section元素。 directionObserver'.section'，方向=>{ log`当前方向为：${direction}`； //根据方向值更改滚动方向。 }; *，*：：之前，*：：之后{ 保证金：0； 填充：0； 框大小：边框框； } .科{ 显示：块； 高度：100vh； 利润率：50px0； } .垂直{ 宽度：100%； 背景：重复线性渐变 0度， 白色 白色50px， 红色50px， 红色100px ; } .水平{ 宽度：300vw； 背景：重复线性渐变 90度， 白色 白色50px， 蓝色50px， 蓝色100px ; }

---

只是想重述一下，看看我是否理解正确。至少有两个部分。默认的滚动行为是垂直的。当第一部分完全不在视图中而第二部分在视图中时，将滚动行为更改为水平方向。是吗？是的，没错，那是我的意图