Make DOM scroll to show desired content using CSS

Asked
Active3 hr before
Viewed126 times

9 Answers

desiredcontentusingscroll
90%

But, in order for it to work, I have to make the viewport height huge, so the user has to scroll a million times before the second 3d shape & h1 appears.,You can see what I mean in this gif. You can see the scrollbar on the right -- the bubble is tiny. In order to just get that I had to make the viewport height equal to 3000vh because 300vh just moves the 3d shape & h1 up a few pixels and doesn't go nearly far enough.,I am experimenting with Three.js and have added some 3d shapes + an accompanying h1 one after the other (vertically) and want to scroll down to each one.

 Pretag team - issue, fix, solve, resolve
88%

Example:

<body onLoad="window.scroll(0, 150)">
load more v
72%

The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.,This property is a shorthand for the following CSS properties:,Flow layout and overflow

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: unset;
load more v
65%

Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.,“I don’t have any particular opinion on if that’s a good or bad thing, but I can say that having scroll bars all over the content of a website is ugly and gross.”,Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.

 Pretag team - issue, fix, solve, resolve
75%

Nice article, however you’ve defined the ‘setFade’ function twice, so scrolling to the bottom of the fourth example triggers the fifth example’s callback – just thought you might wanna know!,But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;., Chris Coyier Permalink to comment# August 17, 2020 when you are at the bottom you’d expect the shadow to disappear. Also you’d expect a shadow at the top in that case. that’s exactly how scroll shadows work: Scroll Shadows

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates.

/n

But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;.

overflow: scroll;
40%

scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content,auto - Similar to scroll, but it adds scrollbars only when necessary,The auto value is similar to scroll, but it adds scrollbars only when necessary:


/n

The CSS overflow property controls what happens to content that is too big to fit into an area.

overflow
load more v
22%

It is important to note that, in addition to the CSS grid, we are giving the .container element a fixed position. This will make this element not affected by the default scroll behavior, allowing to perform custom transforms with Javascript.,And we have finished implementing this beautiful scroll based animation:,With all this ready, let's see how to implement our custom scroll behavior.

We will use a simple HTML structure, where each image in the design will actually be a div element in the HTML code, and the images will be defined and positioned with CSS, which will facilitate this task:

<!-- The `.container` element will contain all the images -->
<!-- It will be used also to perform the custom scroll behavior -->
<div class="container">
   <!-- Each following `div` correspond to one image -->
   <!-- The images will be set using CSS backgrounds -->
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
   <div class="image"></div>
</div>
load more v
60%

The last definition may also be new to you: pointer-events: none. This essentially lets interaction events like clicks "fall through" this element so that it doesn't block the rest of the document. We wouldn't want this wrapper to accidentally block links in the content, for example.,Next, you may wonder why we added a wrapper for this link. The reason is we need to use it to basically create a "scroll track" for the link to live within.,We place our link after the article, but within main. It isn't specifically part of the article, and we also want it to be last in focus order.

First, we need to setup some semantic markup for a basic content format:

<header id="top">Title</header>
<main>
   <article>
      <!-- long form content here -->
   </article> <!-- Back to Top link -->
   <div class="back-to-top-wrapper"> <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a> </div>
</main>
load more v
48%

For virtual scrolling, the natural effects of the <img> are not desirable features. We recommend using the <ion-img> component over the native <img> element because when an <img> element is added to the DOM, it immediately makes a HTTP request for the image file. Additionally, <img> renders whenever it wants which could be while the user is scrolling. However, <ion-img> is governed by the containing ion-content and does not render images while scrolling quickly.,When including images within Virtual Scroll, be sure to use ion-img rather than the standard <img> HTML element. With ion-img, images are lazy loaded so only the viewable ones are rendered, and HTTP requests are efficiently controlled while scrolling.,If a custom component is going to be used within Virtual Scroll, it's best to wrap it with a <div> to ensure the component is rendered correctly. Since each custom component's implementation and internals can be quite different, wrapping within a <div> is a safe way to make sure dimensions are measured correctly.

<ion-content>
  <ion-virtual-scroll [items]="items" approxItemHeight="320px">
    <ion-card *virtualItem="let item; let itemBounds = bounds;">
      <div>
        <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
      </div>
    <ion-card-header>
      <ion-card-title>{{ item.name }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>{{ item.content }}</ion-card-content>
    </ion-card>
  </ion-virtual-scroll>
</ion-content>
load more v

Other "desired-content" queries related to "Make DOM scroll to show desired content using CSS"