本文介绍了如何使用CSS3的column属性实现小说阅读器的水平滑动翻页效果。主要内容包括设置容器属性如column-width、column-count等，以及分栏属性column-span。需要注意的是，当容器高度有限制时，内容超出会导致列数增加。实现翻页效果的关键在于限制章节容器的高度，设置column-width等于容器宽度，并结合overflow: hidden和JS touch事件控制水平移动。
大致效果：https://codepen.io/Wangxixi/pen/yWbKdg
主要使用的是CSS3的column属性，这个属性用于多列布局。
容器属性
1、column-width
- 语法：
column-width: auto | length -
定义为每一列的最小宽度
2、column-count
- 语法：
column-count: auto | integer - 定义列的理想数量。当容器的总宽度使column-width与column-count出现矛盾之处时，column-count失效，让位于column-width属性。
3、columns
- 语法：
columns: [column-width] | [column-count] - column-width 与 column-count的合并简写。
4、column-gap
- 语法：
最低0.47元/天 解锁文章
扫一扫
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
