CSS 设置上下滚动禁止左右滚动

最新推荐文章于 2025-05-08 15:55:29 发布
最新推荐文章于 2025-05-08 15:55:29 发布
阅读量7.1k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css 禁止左右滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bitcser/article/details/116229098
本文介绍了如何使用CSS属性`overflow-x`和`overflow-y`来分别控制内容的左右和上下滚动。通过设置`overflow-x:hidden;`和`overflow-y:scroll;`，可以实现只允许页面上下滚动，禁止左右滚动的效果，从而实现更精细的布局控制。

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

CSS中"overflow:scroll"默认是左右，上下都滚动

其实可以单独设置左右和上下

 overflow-x: hidden;
 overflow-y: scroll;

overflow-x控制左右

overflow-y控制上下

这样设置，上下可以滚动，左右禁止滚动

H5 移动端禁止上下滚动css设置
Dove言和
04-24 1万+
html,body{ overflow: hidden; height: 100%; } 要同时设置html、body两个的属性
html5 页面可以上下滚动,html5 touch事件实现触屏页面上下滑动
weixin_30624835的博客
06-03 1357
这篇文章主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码，代码注释很清楚，感兴趣的小伙伴们可以参考一下最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。比较全面的上下滑动的小demo，代...
H5移动端页面禁止页面滑动
qq_35520046的博客
09-02 671
H5移动端页面禁止页面上下左右滑动。
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
12-09
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的：在设置Frame时，有一属性是scrolling="yes/no/auto"，IE6的Mozilla都支持，但很显然地，IE的开发人员在这个地方懒了一下，他们对auto的理解很不人性化。auto的意思是自动，就是要的时候有，不要的时候没有。但如果设成auto，则在网页过长需要出竖起滚
掌握CSS滚动行为与滚动快照
最新发布
weixin_42576186的博客
05-08 335
本文深入探讨了CSS中的滚动行为与滚动快照技术，包括如何通过CSS属性实现平滑滚动，以及如何控制滚动结束时元素的对齐方式。文章详细介绍了scroll-behavior、overflow、scroll-snap-type和scroll-snap-align属性的使用，并通过实例展示了如何在Web开发中应用这些技术以提升用户体验。
html禁止移动端左右滑动
itsmia的博客
03-20 1846
请注意，虽然上述方法可以阻止页面的左右滑动，但在某些情况下，可能会破坏网站的用户体验，因为用户无法滚动查看页面内容。因此，在应用这些方法之前，请确保你真正需要禁止页面的左右滑动，并在实际应用中进行充分测试。要禁止移动端页面的左右滑动，你可以使用 CSS 的 overflow-x 属性和 JavaScript 来实现。这将禁止在移动设备上触发的 touchmove 事件的默认行为，从而阻止页面左右滑动。// 禁止触摸事件的默认行为。
CSS3中position属性新增的sticky用法(上下滚动固定,左右滚动时不固定)
xlzy
05-31 9241
属性介绍 position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 可以知道sticky属性有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当...
css禁止移动端页面的左石划动手势
Davoid的博客
06-05 551
【代码】css禁止移动端页面的左石划动手势。
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止触摸移动事件（`touchmove`）和鼠标滚轮事件（`mousewheel`）的默认行为。在Vue中，我们可以直接在...
css移动端禁止左右滑动,可以上下滑动
06-13
` 来禁止左右滑动，同时保留上下滑动。具体实现如下： ```css body { overflow-x: hidden; } ``` 这会禁止网页在水平方向上滚动。如果你想要在某个具体的元素上实现这个效果，只需要将 `body` 替换成你想要的...
【h5】页面防止左右滑动，可以上下滑动
fzxyxf1314的博客
05-10 865
h5禁止滑动
使用css实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果
热门推荐
Smile_Monica的博客
10-11 3万+
注意：下面代码的公共样式*{margin:0; padding:0}部分不要去掉： 固定头部文件 *{margin:0; padding:0} body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff} a{color:#528036; text-
css如何让滚轮滚动时 不让页面滚动_你做的网页里滚动条不好看？那就让它看不见...
weixin_39683163的博客
11-29 289
大家好，欢迎踏入野生程序猿的生存之道，我是你们的老朋友大猿！今天我们来聊聊怎样让你做的网站的滚动条消失。在一些网站和一些BS架构的业务系统中，尤其是一些特殊场景，如数据监控、时间轴等展示框里，我们不希望页面中出现滚动条，但同时呢，我们还希望在内容过多时，保留鼠标滚轮的响应能力，那么今天就给大家带来一个小技巧，让你的滚动条马上消失~我们先来看看下面这个场景，是不是很眼熟？示意图中有两个容器，外层容器...
解决页面可以左右滑动但无法上下滑动（有坑）)
i_NEEDYoU的博客
05-13 1万+
ionic-scroll 解决页面可以左右滑动但无法上下滑动（有坑）原因 原因 那天天朗气清，惠风和畅，我在悠闲看代码，突然间有人给我发了个sos，我知道麻烦的事情来了。 对方给我了一个问题：为啥我们的页面滑动不灵敏，上下滑动需要滑动多次才能使用，使用过了几次之后我发现只是由于页面的某些区域使用了ion-scroll让该区域可以左右滑动，我一度认为这是无法解决的，之所以他在某些情况下也能滑动 该区...
CSS中"overflow:scroll"可不可以只上下滚动，左右不滚动
shao.bing的专栏
10-12 1万+
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的： 在设置Frame时，有一属性是scrolling="ye
网页滚动条上下滚动固定元素左右不固定之sticky
FlyWine的博客
02-09 1487
网页滚动条上下滚动固定元素左右不固定之sticky 有时候我们需要网页中某元素在上下滚动时可以固定在某一位置，但是左右不固定，也就是会随着左右滚动条滚动。那么我们可以通过 sticky 布局来解决。 position: sticky 我们先看看兼容性： 在使用前需要考虑好兼容性的问题。 基本使用 <!DOCTYPE html> <html> <head> &l...
css 固定左右位置不动
qq_33240556的博客
07-13 693
要在CSS中使一个元素固定在页面的左右位置不动，通常是指希望该元素在水平方向上保持固定，而垂直方向可能随内容流动或者也是固定的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值