Почему моя простая CSS функция прокрутки не работает? - PullRequest
Новая
       4

Почему моя простая CSS функция прокрутки не работает?

0 голосов
/ 17 марта 2020

Я пытаюсь использовать функцию прокрутки, но она просто не работает. Я так растерялся - что я делаю не так ??

HTML: 

<!doctype html>
<html>
<body>

    <div class="section" style="background-color: peachpuff">
        <h2>Headline</h2>
        <p>My Text</p>
    </div>

    <div class="section">
        <h2>another Headline</h2>
        <p>Another line of text</p>
    </div>

    <div class="section" style="background-color: peachpuff">
        <h2>next Headline</h2>
        <p>Text line - lorem ipsum and stuff</p>
    </div>

    <div class="section">
        <h1>THE END OF THE SCROLL</h1>
    </div>

</body>
</html>

CSS: 

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto;
    scroll-snap-type: y mandatory;
}

h1, h2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;
}
.section{
    display: flex;
    flex-direction: column;
    width:100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

https://codepen.io/Shampie/pen/vYOrOEW

Заранее спасибо!

(сначала кода недостаточно, теперь слишком много кода, и мне нужно больше текста ... Я не знаю, что еще сказать о она)

1 Ответ

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

scroll-snap-type не работает, когда он назначен элементу body. Вы можете исправить это, назначив вместо этого тег html: 

html {
  scroll-snap-type: y mandatory;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto; 
}

Но есть проблема: раньше она работала нормально, но странно себя ведет в Chrome после недавнего обновления до версии 81 (для меня проблемы начались вчера).

Другой подход состоит в том, чтобы обернуть все в элементе контейнера и назначить для него тип scroll-snap-type: 

.body {
    margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
  }
  .scrollsnap-section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

<div class="scrollsnap-container">
    <section id="slide-1" class="scrollsnap-section">
      <h2>slide 1</h2>
    </section>
    <section id="slide-2" class="scrollsnap-section">
      <h2>slide 2</h2>
    </section>
    <section id="slide-3" class="scrollsnap-section">
      <h2>slide 3</h2>
    </section>
    <section id="slide-4" class="scrollsnap-section">
      <h2>slide 4</h2>
    </section>
    <section id="slide-5" class="scrollsnap-section">
      <h2>slide 5</h2>
    </section>
  </div>

Это кажется работать лучше для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...