从垂直滚动到水平滚动，然后返回到垂直滚动

Go from vertical scrolling to horizontal and then back to vertical

本文关键字：滚动 垂直 返回 然后 水平      更新时间：2023-09-26

我正在创建一个非常长的页面，中间有一个非常宽的SVG图像。我基本上希望页面垂直滚动，直到到达该图像，然后水平滚动到图像的结尾，然后继续垂直滚动到页面的底部。

我已经研究了几个小时，什么都找不到，所以我真的很感激任何建议。非常感谢！

好的，这将是我的解决方案：

将页面分为三部分：

上部容器、SVG和底部容器。

默认情况下，将底部容器的值设置为"Display:none"。

我将把SVG包装成div，给出包装器值"overflow：hidden；

<div class="svg-wrapper" style="display: none;">
    <div class="inner">
        svg or whatever image content goes here...
    </div>
</div>

潜水"内部"将是水平拖动的，我会在那里开始挖掘：http://jqueryui.com/draggable/

然后，我会使事件侦听器，当'inner'x值不是0时，我会将Upper设置为包含"display:none；"，这样svg包装器及其内容将是唯一可见的对象。

当svg被足够拖动时（x值为-（svg宽度-屏幕宽度）），我会将底部区域设置为"dispy:block；"。

这对你有意义吗？

相关文章：