怎么控制当前页面不左右滑动，可以上下滑动

最新推荐文章于 2024-05-11 11:24:23 发布
最新推荐文章于 2024-05-11 11:24:23 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741441/article/details/123899339
版权

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

其实可以单独设置左右和上下
overflow-x控制左右
overflow-y控制上下
如下：

 overflow-x: hidden;
 overflow-y: scroll;
猫猫的叮当
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面上下滑动
07-01
利用自定义的ScrollView加载视图来实现翻页效果，根据手势滑动实现屏幕的上下滑动，回调接口实现当前页面操作
iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）
01-06
如图，左侧上下滑动改变亮度，右侧上下滑动改变音量。 1.改变屏幕亮度 //获得当前屏幕亮度 light = [UIScreen mainScreen].brightness; light = 0.5f; //直接赋值或者使用set方法皆可 [UIScreen mainScreen]....
Android 设置ScrollView不可滚动
Fushize的博客
10-29 8125
前言： 设置ScrollView不可滚动？ 咋一听可能觉得很鸡肋，如果你不需要滚动，为什么要用ScrollView呢？ 但是在需求越来越复杂的今天，有很多场景是完全需要用到的。比如你需要在一些情况下，开启滚动，在一些情况下又需要关闭滚动。 思路： 当然，ScrollView本身没有方法去关闭开启滚动。所以我们需要创建新的文件 ，继承ScrollView。 重写onTouchEvent...
使页面左右无法滑动（手机端）
weixin_34387284的博客
10-15 2741
style="overflow:auto;overflow-x: hidden" 转载于:https://www.cnblogs.com/xiaohuihui123/p/4883181.html
css案例 tab上下滚动，左右滚动
最新发布
weixin_38982591的博客
05-11 409
【代码】css案例 tab上下滚动，左右滚动。
Vue页面实现全屏div拖动 禁用left后可只上下垂直拖动
qq_43193513的博客
05-06 539
还是直接上代码 <template> <div class="main"> <div ref="move_div" @touchstart="down" @touchmove="move" @touchend="end" :style="{top: top + 'px', left: left + 'px'}" class="drag_area"></div> </div> </template> exp
div利用overflow产生能上下拉动的滚动条
开心大表哥
01-21 1791
style="background:pink;overflow-y:scroll;word-break:break-all;width:150px;height:150px">  dddddddddddddddddddddddddddddddddddddddddddddddasssssssss  sssssssssssssssssssssssssssssssssssssssssssssssss
小程序实现左右两边滚动互不影响css布局
SilentLand的博客
11-03 1283
效果图 布局思路：利用固定定位 左边盒子 .c-left { position: fixed; top: 100rpx; bottom: 0; width: 200rpx; overflow: scroll; padding-top: 20rpx; } 右边盒子 .c-right { position: fixed; top: 100rpx; bottom: 0; left: 200rpx; .
解决Vue页面固定滚动位置的处理办法
08-30
本篇文章主要介绍了解决Vue固定滚动位置的处理办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
08-14
fixed值可以让元素固定在页面的某个位置，而不受滚动条的影响。 然而，在实际开发中，我们可能会遇到一些问题，例如在IE浏览器中，fixed值可能不生效。这是因为IE浏览器对CSS的支持不够完整。为了解决这个问题，...
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
11-20
微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能 自动播放当前页视频 翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-...
css中内容出现滚动时不影响布局解决办法
weixin_34006965的博客
05-10 1641
最终我们需要的效果是:它的布局结构式这样的:代码实现说明：完整代码:<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ margin:0; paddin...
使用html+css写的h5移动端的页面会产生左右晃动不固定问题，解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
qq_32849999的博客
09-20 1万+
1、使用html+css写的h5移动端的页面会产生左右晃动不固定的时，给父级加 overflow-x：hidden属性 2、解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题 解决方法为： 在body体内设置固定定位，top为0，left为0即可，同时设置html标签overflow:hidden; body{ position:fixed; to...
html如何去除左右滑条,移动端左右两边滑动，并且去除滚动条
weixin_42353258的博客
06-15 1819
html代码如下： 篮球 篮球 篮球 篮球CSS代码如下：.yyjx_row {width:100%;display: -webkit-box;justify-content: flex-start;align-items: center;white-space: nowrap;overflow-x: scro...
微信小程序左右分类实现滚动
sslcsq的博客
05-03 1917
最近在做一个小程序项目时， 分类的页面呢主要分两个部分，左右 左右分别滚动，互不干扰 感觉自己学的css都忘到家了，之前用vue实现的仿京东页面，和这个布局差不多， 那么开始实现吧 如何实现呢？ 由于没什么逻辑性的东西，直接上代码吧 wxml部分 <view class="page"> <view class="flex_row"> <view class...
HTML顶部导航栏固定，左侧菜单栏固定，右侧内容区上下滚动
小海鲜的博客
04-03 3327
【代码】HTML顶部导航栏固定，左侧菜单栏固定，右侧内容区上下滚动。
CSS中"overflow:scroll"可不可以只上下滚动，左右不滚动
shao.bing的专栏
10-12 1万+
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的： 在设置Frame时，有一属性是scrolling="ye
HTML中滚动条滚动时如何让上面的标题固定不动
热门推荐
Quincylk的专栏
10-20 3万+
在做web前端开发时，有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的，通过在不同的节点设置overflow就很容易实现。 但是有时候一开始的层次结构设计的不能满足让标题固定不动，如果调整层次结构又会改动很多文件。例如一开始，标题并没有单独放在一个div里，而是按左右设计的，并且是在2个不同的模板文件里。这时要实现上述需求，在不改动大的层次结构
css overflow溢出显示隐藏
lxllxl211的博客
10-05 2031
将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden;运行结果：溢出的部分显示滚动条 不溢出也显示。默认是：overflow: visible;运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果：隐藏了溢出的部分。
在vue中如何实现使用鼠标控制页面上下滑动
07-07
在Vue中实现使用鼠标控制页面上下滑动，你可以通过添加滚动事件监听和设置页面滚动位置来实现。以下是一个示例： ```html <template> <div class="container" @wheel="handleScroll"> <!-- 页面内容 --> </div> </template> <script> export default { methods: { handleScroll(event) { // 获取鼠标滚轮滚动的方向，event.deltaY表示垂直方向上的滚动距离 const direction = event.deltaY > 0 ? 1 : -1; // 获取当前页面滚动的位置 const currentPosition = window.pageYOffset; // 设置新的页面滚动位置 window.scrollTo({ top: currentPosition + direction * 100, // 滚动距离，可以根据需要调整 behavior: 'smooth' // 平滑滚动效果 }); } } }; </script> <style scoped> .container { height: 100vh; /* 设置容器高度为视窗的高度 */ overflow-y: scroll; /* 允许垂直滚动 */ } </style> ``` 在这个示例中，我们给容器元素绑定了`@wheel`事件监听，即鼠标滚轮事件。当鼠标滚轮滚动时，会触发`handleScroll`方法。 在`handleScroll`方法中，我们首先判断鼠标滚轮滚动的方向，根据`event.deltaY`的值来判断。然后获取当前页面滚动的位置`window.pageYOffset`，并根据滚动方向和滚动距离的倍数来计算新的滚动位置。 最后，使用`window.scrollTo`方法设置新的页面滚动位置。其中，`top`属性表示距离页面顶部的距离，根据当前位置和滚动方向来计算。`behavior`属性设置为`smooth`表示使用平滑滚动效果。 通过以上代码，你可以实现在Vue中使用鼠标控制页面的上下滑动效果。记得将代码适配到你的Vue组件中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值