CSS -фиксированный div с горизонтальной прокруткой - PullRequest
Новая
       108

CSS -фиксированный div с горизонтальной прокруткой

0 голосов
/ 29 апреля 2020

Я бы хотел зафиксировать свой холст во время прокрутки страницы в горизонтальном направлении.

Однако, как только я установил свой холст, фиксированная вся страница не двигается. И страница начинает двигаться, когда я отменяю фиксированную позицию моего холста.

Есть ли способ установить фиксированный холст, когда я прокручиваю страницу по горизонтали?

my 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

PS Поскольку я собираюсь делать анимацию в зависимости от положения горизонтальной прокрутки, используя scrollmagi c, я думаю, что это первый шаг для моего проекта. Заранее спасибо.

1 Ответ

0 голосов
/ 29 апреля 2020

Ах! Я узнал! Это потому, что на моем холсте есть скроллеры. Я собираюсь оставить эту запись и оставить ссылку для того, кому нужна помощь в будущем

...