如何使Canvas固定定位时页面仍可实现水平滚动？

你的问题根源在于固定定位的元素脱离了文档流，原本负责触发水平滚动的.scroller被放在了fixed的.canvas内部，导致文档流中没有足够宽的元素来触发页面滚动。我们只需要调整结构和样式，把滚动元素放回文档流，让canvas固定覆盖在上方即可。

步骤1：调整HTML结构 #

把.scroller从.canvas中移出，作为body的直接子元素，让它回到文档流里：

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap" rel="stylesheet">
<head>
</head>
<body>
<div class='title'> Story of Everything </div>
<div class='canvas'></div>
<div class='scroller'>
  <div class='start'></div>
  <div class='start'></div>
  <div class='start'></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js'></script>
<link rel='stylesheet' href='./style.css'>
<script src='./main.js'></script>
</html>

步骤2：修改CSS样式 #

核心是让.scroller在文档流中提供足够的宽度触发滚动，同时让.canvas固定在视口并覆盖在上方：

body{
  margin:0;
  overflow-x: auto;
  overflow-y: hidden;
  background-color:rgba(0, 0, 0, 0.938)
}
.canvas{
  position:fixed;
  top:50px;
  left:0;
  right:0;
  margin:0;
  padding:0;
  width:100%;
  height:calc(100vh - 50px); /* 减去top的50px，避免超出视口 */
  z-index:10; /* 确保canvas在滚动元素上方 */
}
.scroller{
  box-sizing: border-box;
  height:5vh; /* 给文档流一个占位高度 */
  width: 1500%; /* 3个.start各占500%，总宽度1500%确保产生水平滚动 */
}
.start{
  width:500%;
  height:100%;
  float:left; /* 让.start横向排列 */
}
.title{
  position:fixed; /* 修正原代码中错误的position值 */
  top:10%;
  width:100%;
  text-align:center;
  font-family: 'Baloo Bhaina 2', cursive;
  font-size:30px;
  color:rgba(240, 240, 240, 0.9);
  z-index:20; /* 让标题在最上层 */
}

原理说明 #

1. 滚动元素回归文档流：.scroller现在是文档流的一部分，它的超宽尺寸会触发页面的水平滚动条，滚动时整个文档会水平移动。
2. Canvas固定脱离文档流：.canvas用fixed定位，始终固定在视口位置，不会随文档滚动而移动，z-index确保它覆盖在滚动元素上方，用户看不到滚动条下方的.scroller，但滚动行为依然有效。
3. 滚动事件正常监听：你依然可以通过window.scrollX或者$(window).scrollLeft()获取水平滚动位置，完全兼容ScrollMagic的动画需求。

内容的提问来源于stack exchange，提问作者BS100