移动端左右滑动以及滚动条

最新推荐文章于 2024-04-21 09:10:41 发布
最新推荐文章于 2024-04-21 09:10:41 发布
阅读量2.1k 收藏 7
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39307273/article/details/105731728
版权

对于移动端左右滑动以及滚动条

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>纯css实现左右滑动</title>
	<style type="text/css">
	ul,
	li {
		list-style: none;
	}

	.slide-box {
		margin-top: 50px;
		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">1</li>
		<li class="slide-item">2</li>
		<li class="slide-item">3</li>
		<li class="slide-item">4</li>
		<li class="slide-item">5</li>
	</ul>
	<p>测试文字，左右滚动时，这里不会动</p>
</body>

</html>

1、当文本长度超出之后  overflow-x: auto 属性自动产生横向滚动条

overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。

使用overflow-y属性来判断顶部和底部边缘是否裁剪。

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

值描述
visible不裁剪内容，可能会显示在内容框之外。
hidden裁剪内容 - 不提供滚动机制。
scroll裁剪内容 - 提供滚动机制。
auto如果溢出框，则应该提供滚动机制。
no-display如果内容不适合内容框，则删除整个框。
no-content如果内容不适合内容框，则隐藏整个内容。

2、-webkit-overflow-scrolling

属性控制元素在移动设备上是否使用滚动回弹效果. （只适用于WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari）

  • auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
  • touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很很生硬，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。

 移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住

 

3、::-webkit-scrollbar{}：滚动条整体部分

可以设置滚动条的样式，

.img-list::-webkit-scrollbar {    /*隐藏掉滚动条*/
  display: none;
}

CSS3自定义滚动条样式 -webkit-scrollbar

 

 

 

css scrollbar样式设置

这里是蒋丞选手
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端左右两边滑动，并且去除滚动条
想飞的猪的博客
09-05 5096
.html   &lt;div class="yyjx_row"&gt;        &lt;div class="yyjx_item" &gt;             &lt;img :src="" alt=""&gt;             &lt;span&gt;篮球&lt;/span&gt;        &lt;/div&
Vue实现移动端左右滑动效果的方法
10-17
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
纯CSS实现左右拖拽改变布局大小
11-20
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。 实现原理 CSS中有一个resize属性，如果一个元素的overflow属性值不是visible，则通过设置resize属性可以拉伸这个元素尺寸。 但是，这种拉伸却有一个问题，那就是拖拽的区域太小了，就右下角那么一丢丢地方： 那有什么办法可以把这个拖拽区域变大呢？ 后来经过我的研究发现，resize属性的拖拽bar和滚动条的拖拽bar是一
vue overflow-x: auto鼠标滚轮横向滚动
weixin_47261119的博客
06-18 1020
vue overflow-x: auto鼠标滚轮横向滚动
滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南
最新发布
JINGWHALE
04-21 1808
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。
html内容溢出,overflow:auto导致出现滑动条 或者 overflow:hidden导致丢失元素边缘内容解决方法（附带分享自用重置浏览器样式代码）
秋叶原的黑猫的博客
07-26 4024
如标题所说，在子元素内容的宽度并没有超过屏幕大小的情况下，设置了width100%后，再设置overflowauto会出现无意义的左右滚动条（如下图）。又或者设置了overflowhdden，会出现右边内容显示不全，但左边外边框显示正常的情况。...
解析css中的overflow属性
m0_68845148的博客
11-10 6393
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
移动端左右滑动小技巧
qq_62089165的博客
01-19 1607
通过flex属性固定宽度（flex-basis）,实现移动端左右滑动效果。
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在这个配置中，我们设置了滚动条只在X轴（水平方向）工作，同时当内容尺寸变化时会自动更新，以及阻止默认的鼠标滚轮事件以确保使用自定义的滚动条。 至于CSS部分，`css`文件夹中的样式文件将定义滚动条的外观和...
js 简易版滚动条实例(适用于移动端H5开发)
10-19
下面小编就为大家带来一篇js 简易版滚动条实例(适用于移动端H5开发)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
手机端左右全屏滑动
03-21
在移动设备上实现“手机端左右全屏滑动”是一种常见的交互设计，它极大地提升了用户的浏览体验，尤其在展示图片、页面切换或者在应用中进行导航时。这种滑动效果通常基于触摸事件（touch events）和CSS3的transform...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
vue2项目中在一个固定大小的盒子里设置了overflow-x：auto控制屏幕不会左右滑动
m0_73154039的博客
06-08 929
样式属性，或者设置不正确导致的。通常情况下，当一个盒子里面的内容超出了它的大小时，我们可以设置。这样可以禁止页面整体左右滑动。如果仍然存在问题 ， 可以检查是否存在其他样式影响了页面布局和滚动。设置为与固定大小的盒子相同，这样可以确保内容不会超出盒子的大小。在 Vue2 项目中，如果在一个固定大小的盒子里设置了。，但是屏幕仍然可以左右滑动，可能是因为没有设置。在这种情况下，我们可以将。
仿淘宝菜单栏左右滑动（VUE 移动端）
qq_44481903的博客
11-13 3129
可通过左右滑动上方的结构来实现下方滑块的跟随移动； 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用 具体效果： HTML *使用两个数组分为上下两行 单个盒子设置固定宽度（以便后面进行计算）在包裹这两行数组的最外层盒子“menuItemsNav”添加 @scroll="scrollEvent 事件 *如果后台返回的是一个数组，可以根据下标奇、偶数来划分为两个数组 <!-- 菜单分类 --> <div class="menuItems"> .
overflow 导致vue-touch左右移动失效
qq_29499107的博客
10-29 1010
vue -touch 左右移动失效
js 鼠标滑轮控制左右横向滚动
PrimaryColor
03-31 2553
代码的实现通过jquery监听滑轮滚动，不推荐原生实现，原生实现还要处理不同浏览器监听的方式和兼容性，jquery已经帮我们做了很多处理了。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
滚动条左右滑动
Bright2017的博客
09-11 1639
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="flexible" content="initial-dpr=2" /&gt; &lt;meta name="viewport" conte
h5：移动端 ：div横向滚动，小滚动条（双滚动条同步）
Lycoris_Red的博客
11-08 3838
移动端，横向滚动的时候，希望有个小滚动条标志一下，说明是可以左右滑动的。 不是直接左右滑动切换页面，而是div左右滑动。 效果如移动掌上营业厅这般。下面蓝色的是个滚动条 实现思路 ： 1、可以左右滑动的放内容的div1 下方专门用来做滚动条的div2 2、隐藏div1的滚动条，显示div2滚动条 3、滚动条同步，实现上面div1滑动，下面div2滚动条滚动 <!...
取消移动端页面左右滑动
05-05
要取消移动端页面左右滑动，可以通过以下方法之一： 1. 使用CSS样式来禁用页面的横向滚动条，并将页面内容宽度设置为固定值，例如： ``` body { overflow-x: hidden; width: 100%; } ``` 2. 使用JavaScript来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值