issues with skrollr on element with overflow: scroll

Question

I'm trying to make a nifty single page with some animations with the help of skrollr. For a very simple example, there are three slides, the slides are just fixed positioned at 100% width and height, the last one has an overflow: auto on it so one can scroll its content that doesn't need any animation and might not need more than 100% height eg. about, contact us and footer sections.

My understanding is that I can use skrollr to set opacity 0 or a display none on an element. The first and second have a higher z-index than the third so hiding the first two should have the third one show up automatically.

I used jQuery to confirm that

$('.slide1, .slide2').css('opacity', 0);

It works fine and the third container shows up while the rest are not visible. With skrollr though, in all other browsers but ff, it scrolls as intended with the trackpad on my macbook but doesn't scroll when using the browser's scrollbar. it's acting as if it's in overflow: hidden.

skrollr.init();

* {
  padding: 0;
  margin: 0;
}

section {
  color: #fff;
  padding: 25px;
}

header {
  position: fixed;
  z-index: 8;
}

.slide1,
.slide2,
.slide3 {
  position: fixed;
  width: 100%;
  height: 100%;
}

.slide1 {
  z-index: 7;
  background: green;
}

.slide2 {
  z-index: 6;
  background: blue;
}

.slide3 {
  z-index: 5;
  background: yellow;
  overflow: scroll;
}

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>


        <header></header>
        <main>
            <section class="slide1"
                data-anchor-target="header"
                data-start="display: block"
                data-100p-start="display: none">
                Slide 1<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
            </section>
            <section class="slide2"
                data-anchor-target="header"
                data-100p-start="display: block"
                data-200p-start="display: none">
                Slide 2<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
            </section>
            <section class="slide3"
                data-anchor-target="header"
                data-200p-start="display: block"
                data-500p-start="display: block">
                Slide 3<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
                scroll?<br />
            </section>
        </main>
    </body>
</html>

http://codepen.io/anon/pen/aZvRWw

bug? not what it was intended for? easier way of doing this? workarounds? I don't want to have to look into a seperate library just to do the same thing.

ghost_dad · Answer 1 · 2016-06-08T14:05:09.707

0

The issue I'm seeing when reviewing in Chrome, FF, and Safari is that when the scrollbar reaches the 3rd slide, it starts to scroll the content in that slide only. So the scrollbar functionality will only scroll within that container (when not using the trackpad).

Edit: since the third slide will need to be independently scrollable, it can't be position: fixed. Instead, we'll make it absolute like so:

.slide3 {
  position: absolute;
  top: 200%;
  left: 0;
  height: auto;
  width: 100%;
}

And remove the skrollr definitions on that slide, as well. Since it's positioned relative to the body, we can add the top: 200% property and know that it will appear once the first two 100% sections are finished scrolling. This also allows the use of the scrollbar through the full animation sequence.

Here's an updated codepen with both of those fixes added:

http://codepen.io/thecox/pen/PzPxYo

Let me know if you're trying to accomplish something different, and I can add some additional information.

edited Jun 08 '16 at 14:05

answered Jun 08 '16 at 07:57

ghost_dad

1,308
2
12
21

I need the third container to be scrollable. it'll be for some components including about us, contact us, and a footer that'll be more than 100% of the page that won't need any animations. – archytect Jun 08 '16 at 08:07
Great, thanks for the clarification! I've updated my answer / codepen to accomplish what you're looking for. – ghost_dad Jun 08 '16 at 14:01
awesome. what'd you change? the height? it works in all browsers except for Chrome – archytect Jun 08 '16 at 14:06
It seems to be working in Chrome for me, it just took a moment to update the codepen (possibly cached?). I edited the answer with a little more info, but basically, the issue is that the `.slide3` can't be `fixed`, so instead I pulled it out of the flow by absolutely positioning it. It has a `top` property of 200% (since we know the other slides are each 100%), and removed the skrollr declarations on it since it'll just be hanging out waiting to be displayed. Take a look at this pen I made with skrollr, it can do some cool stuff: http://codepen.io/thecox/pen/ZWvmbj – ghost_dad Jun 08 '16 at 14:12
I've done some stuff with scrollmagic, it definitely has some advantages with this particular type of scrolling. So much more complicated though. ;) – ghost_dad Jun 08 '16 at 14:14
I've tried the codepen as well as copying the code to a local html file, still doesn't work on Chrome Version 50.0.2661.102 (64-bit) – archytect Jun 08 '16 at 14:26

issues with skrollr on element with overflow: scroll

1 Answers1