Position scroll snap slightly after target element with CSS?

user_8956100 0
Viewed 43

With snap scroll margin, I can position the snap before the default, which is useful when you want to avoid a fixed element, such as a navigation bar, obscuring the target element. However, in this case, I want the opposite. I want the snap position slightly after the start of the target element, in this case, a full-screen image, to hide the narrow wavy border at the top.

I have an absolute positioned svg wavy border at the top and bottom of the image. I have tried to use negative values with snap margin but no luck. Scroll-margin-top doesn't seem to accept negative margins. Lowering the default snap position with absolute positioning by creating a pseudo-element :after/:before also didn't work. Obviously, I don't know what I am doing. Any ideas?

Attempt 1:

.snap {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: -20px;
}

Attempt 2:

.snap:after {
    content: '';
    top: 20px;
    display: block;
    position: absolute;
    pointer-events: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

Simplified Html:

<figure class="position-relative">
   <div class="top-divider">
     <svg><use xlink:href="#divider-inf"></use></svg>
   </div>

   <img src="assets/img/hug/hug-3x2-lg.jpg" width="1200" height="800" alt="group hug" class="snap">

   <figcaption>Peace, Love and Samb</figcaption>

   <div class="bottom-divider">
      <svg><use xlink:href="#divider-inf"></use></svg>
   </div>
</figure>
css html
1 Answers

So, I figure it out. Rather than apply absolute positioning to a pseudo-element, apply it to an empty div.

CSS:

.snap-div {
    position: absolute;
    top: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

Html:

<figure class="position-relative">
   <div class="snap-div"></div>
   <div class="top-divider">
     <svg><use xlink:href="#divider-inf"></use></svg>
   </div>

   <img src="assets/img/hug/hug-3x2-lg.jpg" width="1200" height="800" alt="group hug" class="snap">

   <figcaption>Peace, Love and Samb</figcaption>

   <div class="bottom-divider">
      <svg><use xlink:href="#divider-inf"></use></svg>
   </div>
</figure>

Please let me know if there is a better approach--for example a pseudo-element code that works.

user_89561000
Related