@ font-face останавливает работу точек прокрутки? - PullRequest
Новая
       43

@ font-face останавливает работу точек прокрутки?

0 голосов
/ 14 октября 2018

Я понимаю, что он все еще очень новый и экспериментальный, но я играл с css scroll-snap и не мог заставить его работать некоторое время.

В конце концов я понял, что пока я использую @ font-face в моем css, функция скроллинга не работает.Если я изменю семейство шрифтов на «Arial» вместо своего определенного шрифта, он будет работать нормально.

Кто-нибудь еще сталкивался с этим?

Codepen: https://codepen.io/galvinben/pen/LgzLxK

@font-face {
  font-family: 'fontName';
  src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}

body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  font-family: 'fontName';
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#one {
  background-color: #222;
}

#two {
  background-color: #333;
}

#three {
  background-color: #444;
}

#four {
  background-color: #555;
}

(Может потребоваться обновить страницу, чтобы увидеть, как она работает / не работает после изменения семейства шрифтов.)

1 Ответ

0 голосов
/ 19 октября 2018

У меня тоже проблемы с этим на данный момент.Похоже, что это влияет только на Chrome.

Единственный способ, которым я смог обойти это, это сделать родительский элемент прокрутки элементом, отличным от тела.Это, однако, не идеально, поскольку вы теряете встроенную мобильную функциональность из-за сужающегося адреса и панелей инструментов.

В любом случае, вот рабочий форк: https://codepen.io/treechime/pen/pxVeVr

html, body {
    height: 100%;
}

.wrapper {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;

    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: start;
}

<div class="wrapper">
    <div class="section">one</div>
    <div class="section">two</div>
    <div class="section">three</div>
</div>

РЕДАКТИРОВАТЬ:

Добавление класса с помощью javascript в конце документа, похоже, тоже помогает, и избавляет от необходимости добавлять лишние элементы. 

body.snap {
    scroll-snap-type:y mandatory;
}

<script>document.body.classList.add('snap')</script>

ИЛИ, чтобы не полагаться на JS дляпривязка к работе 

body {
    scroll-snap-type:y mandatory;
}

body.fix {
    display:inline-block;
    width:100%;
}

<script>
    document.body.classList.add('fix');
    setTimeout(function() { document.body.classList.remove('fix'); }, 0);
</script>
...