H5实现横向滚动的方法总结
小程序中有横向滚动的swiper,H5中目前得手动实现。
实现方法如下:
外层需要设置:
overflow: scroll;white-space: nowrap;
内层需要设置:
display: inline-block;
<div class="noticeListBox">
<div class="noticeList" v-for="(item,index) in 10"> </div>
</div>
.noticeListBox {
width: 100%;
box-sizing: border-box;
overflow: scroll;
white-space: nowrap;
}
.noticeListBox::-webkit-scrollbar {
display: none;
}
.noticeList{
display: inline-block;
}
H5实现横向滚动的方法总结的更多相关文章
- 使 WPF 支持触摸板的横向滚动
微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...
- web开发 小方法1-禁止横向滚动
最近学了学做了个公司的网站 总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...
- swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- react-native 横向滚动的商品展示
在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件 ShopCenter {/*** 横向滚动 *** ...
- Android TextView 横向滚动(跑马灯效果)
Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...
随机推荐
- 【学习笔记】Docker基础
基本概念 Docker是什么? Docker是一种基于Golang开发的虚拟化技术,开发人员和系统管理员使用容器开发,部署和运行应用程序的平台. 使用Linux容器部署应用程序称为容器化. 容器不是新 ...
- APIO2019简要题解
Luogu P5444 [APIO2019]奇怪装置 看到这种题,我们肯定会想到\((x,y)\)一定有循环 我们要找到循环节的长度 推一下发现\(x\)的循环节长为\(\frac{AB}{B+1}\ ...
- 『Broken Robot 后效性dp 高斯消元』
Broken Robot Description 你作为礼物收到一个非常聪明的机器人走在矩形板上.不幸的是,你明白它已经破碎并且行为相当奇怪(随机).该板由N行和M列单元组成.机器人最初位于第i行和第 ...
- Git系列 —— github提交一个空目录
转载自github提交一个空目录 github默认不上传空目录,有的时候需要空目录来保持程序的结构. 两种场景 1.始终保持空目录,即时里面有文件,也全部忽略掉. 建立一个.gitignore文件放到 ...
- MQTT v5.0------SUBSCRIBE 报文
SUBSCRIBE 报文 固定报头: 剩余长度字段 表示可变报头的长度加上有效载荷的长度,被编码为变长字节整数. 可变报头 SUBSCRIBE报文可变报头按顺序包含以下字段:报文标识符(Packet ...
- 2、Vue构造器和扩展
1.VUE构造器简介 VUE构造器是一个非常重要的语法. 每个Vue.js应用都是通过构造函数Vue创建一个根实例. New了Vue对象,然后调用了这个vue对象的构造器,并向构造器传入了数据. 在实 ...
- TRIO-basic指令--CAM
大家好,今天更新TRIO的运动指令CAM(也就是CAM函数),CAM指令是控制器直接发送编码器脉冲形成的运动曲线,比如:正弦,余弦曲线,根据自己的精度需求进行描点,但并不一定点数越多精度就越高,以实际 ...
- javaScript 对象的hasOwnProperty方法打印window自定义属性
for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : & ...
- 47、安装node-sass后运行报错
vue安装node-sass编译报错安装node-scss报错安装node-scss报错在搭建vue脚手架 或者是在vue项目中,想使用sass的功能, npm install node-sass - ...
- Java 数组实例——将阿拉伯数字转换为最大写
题目:将阿拉伯数字转换为最大写,比如1234转换为壹仟贰佰叁拾肆. package my_package; public class Transform { private String[] arr1 ...