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

最新推荐文章于 2022-08-24 23:22:08 发布
转载 最新推荐文章于 2022-08-24 23:22:08 发布 · 522 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/snowhite/p/9965230.html
文章标签：

#javascript #操作系统 #xhtml #ViewUI

本文介绍了一种使用CSS而非JS来实现移动端横向滑动展示的方法，通过代码示例展示了如何设置元素宽度、隐藏滚动条及响应式布局，简化了传统JS处理方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

 
一、直接上代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<title>test</title>
<style>
body,p { margin:0; padding:0;}
.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }
.box { white-space:nowrap; overflow-x:auto; } /*注释1*/
.box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/
.box div { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px;
background:#ccc; text-align:center; } /*注释3*/
.box p { width:100%; height:50px; background:pink; }
.box div:last-child { margin:0; }
</style>
</head>
<body>
<div class="concent">

<div id="button1" class="box">
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
</div>

</div>
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isUc = u.indexOf('UCBrowser') > -1; //uc浏览器
//var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid&&isUc){ /*注释5*/
$('.box').on('touchstart',function(){
$(document).on('touchmove',function(e){
e.preventDefault();
});
$(document).on('touchend',function(){
$(document).unbind();
});
});
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/snowhite/p/9965230.html

bootstrap怎么在移动端横向布局_[技术博客]采用Bootstrap框架进行排版布局
weixin_39759270的博客
12-21 569
[技术博客]采用Bootstrap框架进行排版布局网页的前端框架有很多很多种，比如Bootstrap、Vue、Angular等等，在最开始其实并没有考虑到框架这回事，开始阅读往届代码时发现其部分采用了Bootstrap框架，因此决定沿用Bootstrap框架。Bootstrap框架可能并不是太优秀，但是其有一个鲜明的特点就是，它是以移动端为优先的，因此在移动端会产生比较好的访问效果。Bootstr...
CSS学习笔记
YuKing_HONG的博客
10-17 1603
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
web端时间轴插件，兼容移动端
10-21
JS时间轴插件，web端时间轴插件，兼容移动端
【css】用css巧妙实现移动端横向滑动展示功能
汪小穆的博客
05-19 2万+
前言：记得以前处理移动端横向滑动展示都是去用js去解决的，要用js进行蛮多处理，要算li的宽度，然后还要用js设置ul盒子的宽度，又要设置最大滑动距离，最小滑动距离等等.......但是现在发现用css就能很好的解决这功能。   一、直接上代码。 &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
纯css 实现横向滚动条--移动端
weixin_30781631的博客
06-14 357
* { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden; /* 超出隐藏滚动条 */ background-color:skyblue; } .box1 .w...
CSS实现移动端横向滑动
weixin_30699463的博客
04-12 326
html： <div class="chosen-container"> <div class="chosen-swiper"> <a href="ticketDetail.html"> <p class="name">壳牌加油</...
手机移动端网页模拟真书翻页
09-27
1. **3D 效果**：Turn.js 使用 CSS3 旋转和透视属性，实现了类似真实翻页的3D视觉效果，使页面在翻转时具有立体感。 2. **响应式设计**：该库能够自动适应不同尺寸的屏幕，确保在手机、平板等不同设备上都能呈现出...
【移动端适配高级技巧】：媒体查询与视口单位的巧妙运用！
![视口单位]...文章还讨论了触控优化和滑动性能的提升，以及使用现代化前端技术如Flexbox和CSS Grid进行布
104道 CSS 面试题
无心玩编程的博客
11-13 1550
104道 CSS 面试题 （给前端大全加星标，提升前端技能） 作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？[1] 2.CSS 选择符有哪些？[2] 3.::before
前端基础总结--CSS
chenyouleww的博客
07-08 688
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
报表移动端app如何实现页面自适应？
12-08
很多报表开发人员经常面临一个问题：PC上制作好的报表，在手机端查看的时候，报表软件默认的自适应效果不尽人如意。例如，报表比较大，到手机上被缩的非常小，字都看不清等等。为此FineReport增加了选项可以手动控制报表在移动终端上的显示效果来解决这一问题。本文将详细演示这一功能如何实现并进行详细的操作演示。
Android之抽屉效果的下拉菜单(上下伸缩和展开)
12-02
实现了一个Android的抽屉效果的下拉菜单(上下伸缩和展开)，和大家一起交流学习，如果有更好的实现效果，也请分享一下(注：积分只是希望能评论的方式。）【联系方式：评论即可】
h5 页面中内容的全部展示和收缩
11-21
这个页面主要展示如果一个页面中的内容特别多的时候，内容收缩展示部分内容，点击展示之后，显示所有的内容，点击收缩展示部分的内容。
可以左右移动横向无缝滚动的JS图片展示
12-09
可以左右移动横向无缝滚动的JS图片展示，不明白的可以问我
简洁的html5+css3导航菜单插件
05-20
一个简单的导航菜单插件，结合html5+css3技术实现，效果还过得去。
mobile-touch实现时间轴特效
qq_41756580的博客
02-21 514
使用jquery-mobile插件能够很方便的监听到移动端的滑动事件，直接复制下面代码即可： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
CSS - 实现横向滚动（横向滚动布局）
热门推荐
资深程序员
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
css实现横向滑动
m0_52518047的博客
05-12 8013
移动端滑动是一个比较常见的css样式，最近也遇到了这样的效果实现，想在此写一篇博客记录一下。 横向滑动，本质就是给了一个100ml的杯子，需要你用这去装1L，2L甚至更多L的水，现实情况是多出的水会溢出来。这样的类比在开发的时候，你就能体会到，一个100px的盒子，要放置总的宽度2,300px的盒子，同理，宽度超过父元素宽度时，盒子也会溢出，那该如何做？ （1）html代码 <div class="father1"> <div class="d1"></div>
HTML5与CSS3实现移动端视频展示插件教程
例如，可以使用CSS3的3D变换功能来创建视频展示插件中的视差滚动效果，让界面元素随着用户的滚动而呈现出立体的移动，从而提升用户体验。 Mobile手机app功能视频展示插件的开发涉及到跨平台兼容性问题。现代浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值