<!DOCTYPE html>

<html>

<head>

<title>纯css实现左右滑动</title>

<style type="text/css">

ul,li{

list-style: none;;

}

.slide-box{

margin-top:200px;

display: -webkit-box;

overflow-x: auto;

/*适应苹果*/

-webkit-overflow-scrolling:touch;

}

.slide-item{

width: 300px;

height: 300px;

border:1px solid #ccc;

margin-right: 30px;

background: pink;

}

/*隐藏掉滚动条*/

.slide-box::-webkit-scrollbar {

display: none;

}

</style>

</head>

<body>

<ul class="slide-box">

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

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

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

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

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

</ul>

</body>

</html>

移动端左右滑动问题-html与css解决的更多相关文章

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

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

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

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

  3. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  4. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  5. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  6. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  7. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  8. 移动端touch滑动事件监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

随机推荐

  1. July 03rd. 2018, Week 27th. Tuesday

    I don't know anything with certainty, but seeing the stars makes me dream. 我不知道世间有什么事是确定不变的,但只要一看到星空 ...

  2. kafka监控项目大全

    https://github.com/claudemamo/kafka-web-console   http://github.com/pinterest/doctorkafka   http://g ...

  3. javascript 字符串转换数字的方法大总结

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...

  4. PHP全栈学习笔记5

    php与mysql数据库,PHP支持很多数据库,与mysql为牛逼组合,mysql数据库的基础知识的掌握是由必要的,要了解如何操作mysql数据库,数据表的方法. 什么是数据库,数据库能做什么,数据库 ...

  5. Servlet+JSP及Tomcat常见面试题（面试必备）

    1.  什么是servlet? servlet是用来处理客户端请求并产生动态网页内容的java类 2.  Tomcat的缺省端口是多少,怎么修改? a)      默认端口号是8080 b)      ...

  6. mac-os安装autojump

    一 概念 autojump是一个命令行工具,它可以使用快捷命令,直接跳转到配置好的目录,而不用管现在身在何处,依赖zsh. 一 安装 安装zsh:sh -c "$(curl -fsSL ht ...

  7. Java相关面试题总结+答案（一）

    [Java基础] 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,即Java开发工具包,提供了Java 的开发环境和运行环境. JRE:Java Ru ...

  8. 网络协议 13 - HTTPS 协议：加密路上无尽头

    系列文章传送门: 网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网 ...

  9. .NET Core微服务之基于MassTransit实现数据最终一致性（Part 1）

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.预备知识:数据一致性 关于数据一致性的文章,园子里已经有很多了,如果你还不了解,那么可以通过以下的几篇文章去快速地了解了解,有个感性认 ...

  10. 写给 Android 开发的小程序布局指南，Flex 布局！

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...