技术控

    今日:114| 主题:49431
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Pure CSS Horizontal Scrolling | CSS-Tricks

[复制链接]
那抹清澈的阳光 发表于 2016-11-30 12:38:16
49 1

立即注册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 */ div { scroll-direction: horizontal; }
复制代码
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 are    on 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"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> </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 { width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; }
复制代码
Now the children:
  1. .horizontal-scroll-wrapper > div { width: 100px; height: 100px; }
复制代码
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 { ... transform: rotate(-90deg); transform-origin: right top; }
复制代码
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 { ... transform: rotate(90deg); transform-origin: right top; }
复制代码
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 { ... transform:rotate(-90deg) translateY(-100px); ... }
复制代码
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.
  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.
友荐云推荐




上一篇:Getting up and Running with the Vue.js 2.0 Framework
下一篇:You Don&#x27;t Know Jacks: Learn to Make Your Code More Secure
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

duyang 发表于 2016-11-30 21:06:36
发发呆,回回帖,工作结束~
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读

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

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

返回顶部 返回列表