5

I understand it's still very new and experimental, but have been playing around with css scroll-snap, and couldn't get it to work for a while.

I eventually realised that whilst I am using @font-face in my css, scroll snap doesn't work. If I change the font-family to 'Arial' instead of my defined font, it works fine.

Anybody else come across this?

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;
}

(May have to refresh the page to see it work/not work after changing font-family.)

Ben Galvin
  • 51
  • 3
  • it's probably more to do with browser compatability https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type#Browser_compatibility – Carol McKay Oct 14 '18 at 09:58
  • For what its worth, Even after following Chromes documentation, It still does not work for me either, Have submitted a bug report to Chrome for investigation – Ricky Feb 07 '19 at 04:07

1 Answers1

4

I'm having issues with this at the moment as well. It seems to only affect Chrome.

The only way I've been able to get around it so far is to make the scroll parent an element other than the body. This, however, is not ideal as you lose native mobile functionality with the shrinking address and tool bars.

Here's a working fork anyway: 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>

EDIT:

Adding a class via javascript at the end of the document seems to also do the trick and saves having to add superfluous elements.

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

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

OR to not rely on JS for snapping to work

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>
Morgan Kelsie McGuire
  • 365
  • 3
  • 8