favorite twitter linkedin chevron-right

Css trick to reproduce glimpse on native scroll

One of the way I used recently to encourage users to scroll divs on horizontal scroller on mobile is to show an incomplete view of what is after, that is what in general is called “glimpse”. This could be accomplish with javascript of course but in many cases javascript could be too excessive, so here a little css snippet that reproduce what I want in a single css line:

width: calc((200%/3)*N);

The above property is applied on the container of your divs where N represents the number of items inside the container.

How the magic happens

What we made is basically to set the size of the div container to the exact width so that each item is large 2/3 of the 100% so that the next item is visible for a third whatever the size of the screen.

This can be accomplished with the CSS function calc(), with calc you can perform calculations to determine CSS property value and it can be used anywhere a integer is required. Is not fully supported (see browser compatibility), but for the main touch devices is ok.

slider-glimpse-1

Here is an exhaustive example that explains it more than thousands words.

HTML

<div class="scroll">
 <ul class="scroll__wrap">
  <li class="scroll__card"></li>
  <li class="scroll__card"></li>
  <li class="scroll__card"></li>
  <li class="scroll__card"></li>
  <li class="scroll__card"></li>
  <li class="scroll__card"></li>
 </ul>
</div>

CSS

.scroll {
 overflow: scroll;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
}
.scroll__wrap {
 width: -webkit-calc((200%/3)*6);
 width: -moz-calc((200%/3)*6);
 width: calc((200%/3)*6);
}
.scroll__card {
 width: 16.6666666667%; // --> 100/6
}

 

Demo | (live in a new window)

slider-glimpse-2

Certainly you can decide to show only a tenth of the next slide (or whatever you want) simply by changing the fraction by setting the items to get the 9/10 of 100%, such as “calc ((900% / 10) * 6)“.

12 Comments

  • Why is 16.6666666667% hard-coded? Can’t we use calc() here, too?

  • The calc() is not needed. The glimpse can be done more simply using these styles alone without knowledge of the number of cards:
    .scroll__wrap {
    white-space: nowrap;
    }
    .scroll__card {
    width: 66.67%;
    display: inline-block;
    white-space: normal;
    }
    Hope that helps,

  • Possibly a simpler way would be to use vh units.

    I will often set the ‘hero’ div to height: 90vh – 90% of the viewport height. You could do the same for each card – .scroll__card { width: 75vw }

  • Here is a live demo of the no calc() approach I mentioned above

    • Hi Mathieu, thanks for sharing

  • I think that usually you don’t know the amount of “cards” that will be in the section when using overflow like that.

    In my experience

  • My issue with the horizontal scroll design pattern is that they are horrible to use on desktop. I rarely bother to scroll them because most of the time you simply can’t with a track-pad or scroll wheel.

    This is a huge interaction flaw and I wish more developers realised this. Either don’t use them or if you insist on using them, implement them correctly with a bit of js to enable desktop users the ability to scroll normally.

    • Of course, I agree with you. I advice to use it just on mobile.

    • It’s only Windows desktops that it’s a horrible experience to scroll horizontally. MacOS and Linux has been fine in this regard for quite some years (and on Windows with some higher-end mouse software). It’s probably worth testing a bit to see where added JS is actually necessary, otherwise you run the risk of giving users of supporting operating systems a sub-standard experience just because of Windows.

  • There is no need to use calc() with a better construct. float and position:absolute are not well suited for carousels. Check Styling effective carousels and for a peeking card example.

    • Thanks for the tip Thierry, I didn’t know this costruct before the article :) very nice.

      • You’re welcome. I’m glad you found the article useful. Thanks.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>