网络科技

    今日:557| 主题:244643
收藏本版
互联网、科技极客的综合动态。

[其他] Pure CSS Horizontal Scrolling

[复制链接]
细软跑 发表于 4 天前
59 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
The following is a guest post by    Pieter Biesemans. Pieter is a front-end developer at    Audiencewhere he loves styling things with SCSS. He's going to dig into what I'd call a bonafide CSS trick.  
  The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!
  I’d be nice if we could do something like this:
  1. /* This isn't real */
  2. div {
  3.   scroll-direction: horizontal;
  4. }
复制代码
Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS.
  That's too bad, as at the company I work for this would be quite useful. We do quite a few web presentations. Presentations are a very horizontal thing - usually slides have a 4:3 or 16:9 radius. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. But if there’s one thing I like, it’s a challenge.
  Another Use Case

  The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible.
  A Non-JavaScript Way

  There are, no surprise, numerous ways to do this in JavaScript. Some of them areon this very site.  
  I was curious if it was possible to do in pure CSS. The solution ended up being fairly straightforward:
  
       
  • Create a container with items   
  • Rotate the container 90 degrees counterclockwise so the      bottomis to the      right   
  • Rotate the items back to correct-side up  
  Step 1) Set up the container

  Make a    <div>, and make a bunch of child elements.  
  In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. These are arbitrary sizes; they could be anything.
  1. <div class="horizontal-scroll-wrapper squares">
  2.   <div>item 1</div>
  3.   <div>item 2</div>
  4.   <div>item 3</div>
  5.   <div>item 4</div>
  6.   <div>item 5</div>
  7.   <div>item 6</div>
  8.   <div>item 7</div>
  9.   <div>item 8</div>
  10. </div>
复制代码
The height of the container will become the "width" and vice-versa. So below, the "width" of our container will be 300px:
  1. .horizontal-scroll-wrapper {
  2.   width: 100px;
  3.   height: 300px;
  4.   overflow-y: auto;
  5.   overflow-x: hidden;
  6. }
复制代码
Now the children:
  1. .horizontal-scroll-wrapper > div {
  2.   width: 100px;
  3.   height: 100px;
  4. }
复制代码
Step 2) Rotating the container

  Now we rotate the container -90 degrees with a CSS    transform. And there you have it: a horizontal scroller.  
  1. .horizontal-scroll-wrapper {
  2.   ...
  3.   transform: rotate(-90deg);
  4.   transform-origin: right top;
  5. }
复制代码
There’s just one tiny issue: our children have rotated too, and now anything within is on its side.
  Step 3) Rotate the children back upright

  How would we go about getting the children upright again? Rotate them back using another, opposite CSS    transform.  
  1. .horizontal-scroll-wrapper > div {
  2.   ...
  3.   transform: rotate(90deg);
  4.   transform-origin: right top;
  5. }
复制代码
Step 4) Fixing the positioning

  It’s starting to look alright, but there are still some issues.
  By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it. The solution: shift it back with    translateY.  
  Better. But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper. The easiest way I’ve found though is to add a top padding to the wrapper equal to the item width, creating a kind of buffer for the items.
  1. .horizontal-scroll-wrapper {
  2.   ...
  3.   transform:rotate(-90deg) translateY(-100px);
  4.   ...
  5. }
复制代码
Demo

  See the Pen    Horizontal scroll (simple example)by Pieter Biesemans (    @pieter-biesemans) on    CodePen.  
  Here's another where you can see non-square children:
  See the Pen    Horizontal scroll (extensive example)by Pieter Biesemans (    @pieter-biesemans) on    CodePen.  
  Compatibility

  I have tested on the devices immediately available to me.
                    Device        OS        Browser        works?                            Desktop        Win10        Chrome 54        Y                    Desktop        Win10        Firefox 47        Y (w scrollbars)                    Desktop        Win10        IE11        Y (w scrollbars)                    Desktop        Win10        Opera 41        Y                    Desktop        Win10        Vivaldi 1.4        Y                    Laptop (touch screen)        Win10        Chrome 54        N                    Samsung Galaxy S3        Android 4.3        Chrome Mobile 52        Y                    Samsung Galaxy S6        Android 5.0        Chrome Mobile 52        Y                    Nexus 6P        Android 6        Chrome Mobile 52        Y                    iPad2        iOS        Chrome Mobile 52        N                    iPad2        iOS        Safari Mobile 9.0        N                    iPad Air 2        iOS        Safari Mobile 9.0        N              Desktop

  Since the styling of scrollbars is currently only supported by WebKit/Blink, Firefox and IE still show the ugly gray ones. You could sniff this out with JavaScript and hide them completely, but that’s stuff for another tutorial.
  Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though.    Both the touchscreen and the touchpad acted as though the div was not rotated.  
  Mobile

  I was kind of surprised to find that Android actually understood that the container had been rotated, and let you scroll sideways by swiping left and right.
  iOS on the other hand did not play nice.It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive. Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue.  
  Conclusion

  According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.
  Beware of using this in production, though. I have tested this on some devices, but not at all extensively or in depth.
  The greatest issue is with touch inputs that requiring you to swipe up and down to go left and right. A possible solution would be to include a message on your site explaining this, but you’d have to rely on people actually reading your message. And even then it’d still be counterintuitive. Another possible solution would be to capture the touch input with JavaScript on those devices, but then you’d be better off just doing the whole thing in JavaScript and foregoing this CSS hack completely.
友荐云推荐




上一篇:阿里开源消息中间件RocketMQ的前世今生
下一篇:How to Create a Social Media Content Calendar for a Year
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表