滚动条一直显示在页面设置

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量2.4k 收藏
点赞数
分类专栏： java_web 文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43475992/article/details/120906441
版权

滚动条一直显示在页面

有时发现有的滚动条只显示在页面内,需要往下拉才能展示

怎么解决??
style="overflow-x:auto"加在body上面,就会解决此问题

代码

运用属性:overflow-x:设置横向滚动条
    
    <body style="overflow-x:auto">
    
    </body>
//加在body上面:为了让其一直显示在页面的父文本框上

//如果加在div上:就会隐藏看不见

显示的效果

在这里插入图片描述
始终显示在页面上

aristo_boyunv
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js+cookie实现页脚固定广告条代码
04-02
js+cookie实现页脚固定广告条代码是一款当用户滚动页面时，横幅广告一直固定在页底，并不随页面滚动而滚动，可以关闭广告条，并设置一定时间内不再显示此广告条。
css 始终显示滚动条，内容超出显示有滑块的滚动条，内容没有超出显示空的滚动条...
weixin_30306905的博客
11-01 1131
1、内容没有超出显示空的滚动条 <div class="div1"> 　　前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码： .div1{ 　　width:200px; 　　height:300px; 　　overflow-y:scroll; } 2、内容超出显示有滑块的滚动条 <div class="div1"&gt...
css设置始终显示滚动条
YanGo的博客
05-06 1万+
在需要设置滚动的元素上设置如下 下面以垂直方向滚动为例，父元素为ul，需要先设置高度。 ul{ height: 260px; overflow-y: scroll; overflow-x: hidden; } ul::-webkit-scrollbar { /* 隐藏默认的滚动条 */ -webkit-appearance: none; } ul::-webkit-scrollbar:vertical { /* 设置垂直滚动条宽度 */ width: 2px; } /* 这里不需要用到
H5页面滚动时显示滚动条，不滚动时隐藏滚动条
千里之行，始于足下
04-28 1908
【代码】H5页面滚动时显示滚动条，不滚动时隐藏滚动条。
elementUi滚动条的使用及设置滚动条一直显示
haogemr的博客
04-27 1万+
elementUi滚动条的使用及设置滚动条一直显示
解决ios系统h5页面滚动条问题
热门推荐
weixin_38958405的博客
03-08 1万+
需求：页面在各种手机端可以正常横向滚动 问题：（以下所有效果均针对ios系统下的，安卓是不存在这个问题的） 1、第一次用基础css实现滚动：overflow：scroll；效果：可以滑动，但是页面滚动起来非常卡，没有回弹顺滑的效果，手指一停，页面就停住了。 2、第二次网上搜方法解决了滑动很卡的现象，给很宽的那个容器加上了css属性：-webkit-overflow-scrolling：tou...
H5之移动端如何让滚动条不隐藏
jexxx的博客
01-12 1628
原来是手机浏览器不支持自定义 scroll，只对 PC 端浏览器生效，推荐使用 iScroll 框架来处理移动端的这种问题。然后在想，是不是其他地方改变了滚动条的显示。找了一圈，也没有啊。
css实现滚动条一直显示，并且实现滚动条样式的修改
阿牛哥的博客
09-07 1449
css实现滚动条一直显示，并且实现滚动条样式的修改 自带的滚动条只有当鼠标移上去的时候才会显示，其他时候隐藏，这样用户很难看出这个是能划动的，这就需要滚动条一直显示在页面上，并且需要按照自己一定的样式去修改。
uniapp scroll-view滚动条不显示及IOS中问题
細水、長流√的专栏
02-27 3207
最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。
微信小程序scroll-view 横向滚动 显示下拉条的问题
小白前端
02-15 1527
微信小程序开发中，scroll-view的横向滚动，是一个常见的排列布局的方式，其实现的代码如下： wxml部分： <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"> <view id="demo" class="scroll-view-item_H demo-text-1">1</view> <view id="demo" class="scroll-
control_table:jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方
05-23
jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方 这只是一个页面的content部分,header & footer并未添加 1.实际页面中,需要加上header的高度; 2.通过offset()获取th这一行所处的位置,...
js cookie实现页脚固定广告条代码.zip
07-11
js cookie实现页脚固定广告条代码简介：js cookie实现页脚固定广告条代码是一款当用户滚动页面时，横幅广告一直固定在页底，并不随页面滚动而滚动，可以关闭广告条，并设置一定时间内不再显示此广告条。
友情链接停止滚动scrollLink插件(乱码空白解决)插件for pjblog.rar
07-14
你可以在后台控制滚动一次的停留时间，控制链接总高度和滚动一次显示多少条链接。如果你希望像我的友情链接一样，每两个排成一排。可以设置css样式。 本人还是PJBLOG新手，希望高手莫笑。博客刚开通才几天，希望...
js+cookie实现页脚固定广告条特效代码
03-20
js+cookie实现页脚固定广告条代码是一款当用户滚动页面时，横幅广告一直固定在页底，并不随页面滚动而滚动，可以关闭广告条，并设置一定时间内不再显示此广告条。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 640
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 735
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 24
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 878
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1204
vue2,vuex,vant组件库
el-table横向滚动条一直显示在页面下方
06-01
如果 `el-table` 的横向滚动条一直显示在页面下方，并且随着页面滚动而滚动，可能是由于 `el-table` 的父元素设置了 `position: fixed;` 或 `position: absolute;` 属性。 解决方法是将 `el-table` 的父元素设置为 `position: relative;`，并将 `el-table` 的高度设置为父元素高度的一部分，以确保 `el-table` 只占用父元素的一部分空间，从而使横向滚动条在 `el-table` 内部显示。 示例代码如下： ```html <div class="table-container"> <el-table :data="tableData" style="width: 100%; height: 100%;"> <!-- 表格列定义 --> </el-table> </div> ``` ```css .table-container { position: relative; height: 400px; overflow: hidden; } .el-table__body-wrapper { height: calc(100% - 17px); overflow-y: auto; overflow-x: auto; } ``` 在上面的示例代码中，我们将 `el-table` 的父元素 `.table-container` 设置为 `position: relative;`，并将其高度设置为 `400px`。然后，我们将 `el-table` 的高度设置为 `100%`，以填充 `.table-container` 的空间。最后，我们在 `.el-table__body-wrapper` 中设置高度和滚动条样式，以确保横向滚动条在 `el-table` 内部显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值