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 ...
随机推荐
- CentOS7安装Kubernetes1.16.3
一.概述 手工搭建 Kubernetes 集群是一件很繁琐的事情,为了简化这些操作,就产生了很多安装配置工具,如 Kubeadm ,Kubespray,RKE 等组件,我最终选择了官方的 Kubead ...
- Tomcat 配置文件解析工具 Digester
Digester 是一个依据 xml 配置文件动态构建 Java 对象树的工具,基于 SAX 解析器进行封装,它为 SAX 事件的处理提供了更高级和友好的接口,让开发更专注于要执行的处理,隐藏了 XM ...
- Linux学习笔记之Centos7 自定义systemctl服务脚本
0x00 概述 之前工作环境一直使用Centos6版本,脚本一直在使用/etc/init.d/xxx:系统升级到Cento7后,虽然之前的启动脚本也可以使用,但一直没有使用systemctl 的自定义 ...
- 图像上划矩形(cv.line()函数)
在图像上划矩形 import numpy as npimport cv2 as cvimg=np.zeros((400,400),np.uint8)cv.line(img,(100,100),(350 ...
- jquery问题,如何调用带this的函数?
这样写: 1 2 3 4 5 6 7 8 9 10 11 12 $(".aa").on("mouseout",function(){ var obj = ...
- phpStudy配置多站点多域名和多端口的方法
切记:要想多个域名指向同一个项目,必须将phpstudy的根目录指向你项目所指的地方(原根目录是WWW),修改位置(其他菜单选项 - 软件设置 - 端口常规设置 - 网站目录) 站点:类似于 WWW ...
- ArrayList的subList方法带来的坑
最近在项目中遇到了一个问题,由一个对象序列化的结构,在反序列化时一直提示失败,真的百思不得其解啊.在对问题排查了好久之后,才发现是这个序列化的对象中的list调用了ArrayList的sublist方 ...
- selenium自动化爬虫测试
import time from selenium import webdriver from lxml import etree from selenium.webdriver import Act ...
- Docker 0x06: Docker Volume卷
目录 Docker Volume卷 一句话什么是docker volume? docker volume特性 docker 挂载卷 docker 多容器间共享数据券 删除,查看数据卷 备份还原数据卷 ...
- linux卸载gitlab
完全卸载gitlab 1.停止gitlab # gitlab-ctl stop 2.卸载gitlab(看是gitlab-ce版本还是gitlab-ee版本) # rpm -e gitl ...