前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了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实现移动端横向滑动列表(可应用于ionic3移动app开发)的更多相关文章

  1. 纯css实现移动端横向滑动列表

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

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

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

  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. Github上优秀的.NET Core项目

    Github上优秀的.NET Core开源项目的集合.内容包括:库.工具.框架.模板引擎.身份认证.数据库.ORM框架.图片处理.文本处理.机器学习.日志.代码分析.教程等. Github地址:htt ...

  2. clr via c# 接口

    1,常用接口及其定义 public interface IDisposable{ void Dispose(); } public interface IEnumerable}{ IEnumerato ...

  3. Python3.7+Pycharm+cuda10.0+tensorflow GPU版本 安装

    处理器:I5-7500 显卡   :GTX1050Ti 系统   :Win10 1. 首先搭建Python环境. 官网https://www.python.org/downloads/下载Python ...

  4. 使用BeanUtils.populate将map集合封装为bean对象

    1.前言 最近在做一个javaweb项目练练手,涉及到把jsp页面中表单的内容存到数据库,和request.getParameterMap配合使用可以将jsp页面表单的数据转化为bean对象. 2.介 ...

  5. vmware进程，虚拟机NAT模式配置固定ip，访问外网与ping通主机

    vmware进程杀不掉 在使用vmware虚拟机时,如果强制结束vmware进程,可能会发现在资源监视器中有一个vmware-vmx.exe进程始终关不掉,获得管理员权限去杀或者重启都没有用,然后正常 ...

  6. win10下载

    Win10 简体中文正式版 微软MSDN官方ISO镜像下载(2020年1月21日更新) 官方地址:https://www.microsoft.com/zh-cn/software-download/w ...

  7. VAR 学习笔记3

    脉冲响应图及方差分析 当使用VAR模型的时候需要完成: 选择合适的变量 就是研究变量这个没有疑问 判断滞后阶数 根据AIC和SC准则,选择 为何做格兰杰因果检验 如果给定 \(x_t\) 的滞后阶数, ...

  8. 【第三篇】C#调用lua文件

    获取一个全局基本数据类型 使用LuaEnv.Global.Get<T>("name")就可以 var str = luaEnv.Global.Get<string ...

  9. lucas定理 模板

    lucas定理 (nm)&VeryThinSpace;mod&VeryThinSpace;p=(⌊np⌋⌊mp⌋)(n&VeryThinSpace;mod&VeryTh ...

  10. JavaScript的语法、数据类型、基本算数和逻辑运算操作

    str.toString() 可以把字符串.数值.布尔值.对象转为字符串 String(str) 任何数值强制转换为字符串类型 <!DOCTYPE html> <html lang= ...