具有水平滚动的 CSS 固定 div答案

【问题标题】：CSS-Fixed div with Horizontal Scrolling具有水平滚动的 CSS 固定 div
【发布时间】：2020-04-29 15:47:33
【问题描述】：

当我将页面滚动到水平方向时，我想将我的画布设置为固定。

然而，一旦我将画布设置为固定，整个页面就不会移动。一旦我取消设置画布的“固定”位置，页面就会开始移动。

当我水平滚动页面时，有没有办法固定我的画布？

我的 html 和 css 如下。 -HTML

<!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 class='scroller'>

        <div class='start'></div>
        <div class='start'></div>
        <div class='start'></div>

    </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>

-CSS

body{
        margin:0;
        overflow-x: auto;
        overflow-y: hidden; 
        background-color:rgba(0, 0, 0, 0.938)
}

.canvas{
    position:fixed;
    top:50px;
    margin:none;
    padding:0;
    width:100%;
    height:100vh;


}
.scroller{
    box-sizing: border-box;
    height:5%;
    position:relative;
}
.start{
    width:500%;
    height:100%;
}

.title{
    background-color: none;
    top:10%;
    position:fixed inline;
    width:100%;
    text-align:center;
    font-family: 'Baloo Bhaina 2', cursive;
    font-size:30px;
    color:rgba(240, 240, 240, 0.9);
}

对于我正在处理的完整代码，这是小提琴链接。

https://codepen.io/jotnajoa/pen/vYNJxwd

附言因为我要根据水平滚动位置使用 scrollmagic，我认为这是我项目的第一步。提前谢谢你。

【问题讨论】：

标签： javascript css d3.js data-visualization

【解决方案1】：

啊！我发现！这是因为我的画布里面有滚动条。我将保留此帖子并为将来需要帮助的人留下链接

【讨论】：