我正在创建一个非常长的页面，中间有一个非常宽的 SVG 图像。我基本上希望页面垂直滚动直到到达该图像，然后水平滚动到图像的末尾，然后然后继续垂直滚动到页面底部。
我已经为此研究了几个小时，但找不到任何东西，所以我真的很感激任何建议。非常感谢!
最佳答案
好的，这就是我的解决方案:
将页面分为三个部分:
上层容器、SVG 和底部容器。
默认情况下，给底部容器值“显示:无”。
我会将 SVG 包装到一个 div 中，给包装器值“溢出:隐藏；
<div class="svg-wrapper" style="display: none;">
<div class="inner">
svg or whatever image content goes here...
</div>
</div>
Div 'inner' 可以水平拖动，我会从那里开始挖掘:http://jqueryui.com/draggable/
然后我会创建事件监听器，当“内部”x 值不是 0 时，我会设置 Upper contained "display: none;"这样 svg 包装器及其内容将是唯一可见的对象。
当 svg 被拖动得足够多时(x 值将是 -(svg 宽度 - 屏幕宽度))，我会设置底部区域“disply: block;”。
这对你来说有意义吗？
关于javascript - 从垂直滚动到水平滚动，然后再回到垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26820263/