前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了iscroll做，结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。

这个问题不知道iscroll本身能不能解决，当时选择了换一种方式来做，只要css就能搞定了，主要是利用了display:-webkit-box来实现。

<!DOCTYPE html>

<html>

<head>

    <title>横向滑动</title>

    <style type="text/css">

        .slide-box{

            margin-top: 200px;

            display: -webkit-box;

            overflow-x: scroll;

            -webkit-overflow-scrolling:touch;

        }

        .slide-item{

            width: 200px;

            height: 200px;

            border:1px solid #ccc;

            margin-right: 30px;

        }

    </style>

</head>

<body>

    <div class="slide-box">

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

        <div class="slide-item"></div>

    </div>

</body>

</html>

纯css实现移动端横向滑动列表的更多相关文章

  1. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  2. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  3. CSS实现移动端横向滑动

    html: <div class="chosen-container"> <div class="chosen-swiper"> < ...

  4. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  5. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  6. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  7. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

随机推荐

  1. 使用Razor

    新建一个名称为Rezor的mvc空项目,定义一个模型内容 public class Product { //定义模型 public int ProductID { get; set; } public ...

  2. git获取别人远程dev分支上的代码

    我们在使用 git clone  xxx.git 下载代码的时候,获取到的只是 master上的代码 假入有个 dev 分支我们想获取上面的代码怎么办! #下载dev分支上的代码并切换到dev分支 g ...

  3. 运算符重载关键字operator

    operator关键字用来重载内置运算符,使用方法如下: public class OperatorController : Controller { // // GET: /Operator/ pu ...

  4. python学习（七）--豆瓣爬取电影名，评分以及演员

    import requestsimport re #爬取豆瓣电影排名pageNum = int(input("要查看第几页电影分数:"))#已知豆瓣默认每页展示20条#url= & ...

  5. 学习总结（一）java web连接池

    大家都知道,在访问数据库时要与数据库建立连接.在jdbc中,用户与数据库建立连接后,取完数据或操作完数据后,就会断开这个连接.当下次还要访问数据库时,就会重新创建连接.这样很浪费资源,尤其是网页上有数 ...

  6. 序列化json和protobuf大小比较

    使用protobuf序列化为二进制和json序列化字符串大小比较 代码demo package com.gxf.demo; import java.io.*; public class Ptotobu ...

  7. Cocos2d-js 开发记录：自定义按钮

    游戏开发总是有些特殊,一般的预制的UI无法满足要求.其实对于不复杂的功能,与其看文档还不如自己写一个.比如游戏中一个虚拟键盘,其中的按键在按下时会增长,变为原来的两倍高度,在原来高度上方显示按键的字如 ...

  8. 【数据库】4.0 MySQL入门学习（四）——linux系统环境下MySQL安装

    1.0 我的操作系统是CentOS Linux release 7.6.1810  (Core) 系统详细信息如下: Linux version 3.10.0-957.1.3.el7.x86_64 ( ...

  9. JavaScript简易动画

    <p id="s">fly</p> <script> function move(){ var id=document.getElementBy ...

  10. Spring MVC开发初体验

    1.目标实现Spring MVC : Hello World! 2.工程创建步骤 new : Dynamic Web Project lib引入Spring框架libs/*.jar touch web ...