2

So I have vertical scroll snapping sections that are all 100vh and 100vw. I was going for the appearance of separate pages. One of those sections has a horizontal scrolling section with the same idea of 100vh and 100vw sections. Well, everything works beautifully until I add a ul tag. The same goes for divs. The horizontal sections then start varying in height. They will still be 100% of the page width but the height will vary. Scroll snapping still works. Heres the code:

HTML

<body>
  <main>
    <section class="v-child">
      <h1>Section 1</h1>
    </section>

    <section class="v-child h-sect">
      <div class="h-child">
        <h2>Horizontal Section 1</h2>
        <ul class="list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 2</h2>
        <ul class="list">
          <li>Thing 1</li>
          <li>Thing 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 3</h2>
        <div class="list">
          <h3>Item 1</h3>
          <h3>Item 2</h3>
        </div>
      </div>
    </section>

    <section class="v-child">
      <h1>Section 3</h1>
    </section>
  </main>
</body>

CSS

By the way, the reason I have scroll-snap-type: y mandatory; targeting the html container is because it doesn't seem to work if you target the body, main, or a dedicated div container. I don't think that is relevant to the current problem but thought I'd mention it because I thought that was weird behavior.

html{
  scroll-snap-type: y mandatory;
}
body{
  margin: 0;
}
.v-child{
  scroll-snap-align: start;
  background: green;
  height: 100vh;
  width: 100vw;
}
h1{
  margin: 0;
}
.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.h-child{
  display: inline-block;
  scroll-snap-align: center;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}
.list{
  margin: 0;
}

I tried giving the list 0 margin which I don't think should really matter and it looks like it didn't because nothing changed. Both the list in the form of ul tags and a div with h3's inside both seem to change the height of the h-child sections. From what I understand div's create an empty line after themselves or something like that. I didn't quite get it. Well if I change the div to font-size 0 all the h-child sections are the same height but then all the content is invisible because all the font-size is now 0.

I also tried setting the .list to font-size 0 and that also worked. All the sections would be the right size. I then add a font-size of 16px to the items in the list, not the list itself and that adds the empty space at the top of each section again. It just boggles me, how is that even possible. The .list is inside the h-child section. Why is it changing its height?! That shouldn't be possible! I pretty much lost all hopes for this layout. I cannot figure it out.

Pavel Kudlanov
  • 21
  • 6

2 Answers2

0

The problem code seems to be this part. <h3> has property display:block which cause weird height on your page. Whether you have to redesign your layout container for middle sections that allow you to use different tags. Or you can simply change <h3> tag to other like <span> and assign text font and bold to it. 

  <h3>Item 1</h3>
  <h3>Item 2</h3>
Yunhai
  • 1,283
  • 1
  • 11
  • 26
  • That seems to be a working solution. I did that, added `display: block;` to the spans to get them on separate lines again and everything was lined up correctly. I believe I actually ended up finding a better solution. I should have used flex to get the different sections instead of whatever I have going on up there. I'll post my solution as an answer below. – Pavel Kudlanov Dec 06 '19 at 23:28
0

If the horizontal section is made using flexbox everything just starts working magically.

Change the .h-sect styling to this:

.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

and the .h-child to:

.h-child{
  scroll-snap-align: center;
  flex: 0 0 auto;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}

Doing it this way all the elements work just like you'd expect them. No unusual behavior at all.

Pavel Kudlanov
  • 21
  • 6