让overfolw：auto的滚动条在上方显示

最新推荐文章于 2023-11-09 15:51:31 发布
最新推荐文章于 2023-11-09 15:51:31 发布
阅读量1.3k 收藏 1
点赞数 4
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/123246735
版权

页面内容过多，溢出部分要滚动显示，上下滚动，左右滚动，但是页面盒子是内容默认撑开，左右滚动就要滑到最下面才能见到滚动条，所以想将滚动条放到最上面，这里用到了css的transform属性

先将父容器的内容翻转，就可以实现让滚动条在最上方

再将子容器的内容翻转，最终实现效果

实现代码：

父容器：

子容器：

 主要用到css的  transform ：scaleY(-1)属性

刘大气
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - 详细实现动态改变元素容器（非页面body）滚动条位置，在一个容器内设置滚动条，并通过 js 改变滚动条位置教程（设置指定子元素div的滚动条位置）
王佳斌
08-25 4458
Vue - 动态改变元素容器（非页面body）滚动条位置（设置指定子元素div的滚动条位置），解决Vue页面固定滚动位置，根据ref来获取元素or组件的滚动条位置，如何设置div滚动条的位置，怎么动态设置滚动器元素容器非页面滚动条的指定位置，vue 动态改变指定元素滚动条的位置，vue页面使用 keep-alive 缓存后，点击进入详情页后返回时发现滚动条位置回到了顶部怎么办，Vue - 页面缓存（keep-alive）后滚动条回到了顶部，不在原来的位置了（从详情页返回列表时发现滚动条位置回到了最顶部，并没
overflow-y:auto 回到顶部
didiedou3444的博客
03-28 1848
overflow-y 　　　　内容溢出元素框时发生的事情。 overflow-y:auto 内容溢出元素框时自动出现滚动条，滑动滚动条显示溢出的内容。 滚动条回到顶部 var container = $('#id');//获取元素 $(container).scrollTop(0);//滚动条回到顶部 1 <!DOCTYPE HTML P...
纯CSS设置滚动条位置调整在左侧或者在上方
細水、長流√的专栏
09-08 917
【代码】纯CSS设置滚动条位置调整在左侧或者在上方。
网页上方提示滚动条实现
weixin_34195364的博客
02-19 311
在看阮一峰的es6入门介绍时，发现在页面滚动的时候页面顶部有进度条显示，觉得不错，就去找了下代码。思路很简单：获取当前整个document文档的高度A（这个是不变的，可以通过($(“body”).height()得到)），在获取到当前窗口的高度B($(window).height()),然后A-B就是文档不在窗口中出现的高度，那么在页面滚动的时候，用$(window).scrollTop()计算出...
overflow: auto滚动条跳到指定位置
最新发布
lianwenxiu的博客
11-09 749
overflow: auto滚动条跳到指定位置
高度百分百 overflow:auto 回到顶部
weixin_34238642的博客
12-03 892
背景：height: 100%; overflow: auto; 采用锚点回到顶部失效 最后换用了另一种方式依赖：jQuery解决方法： $('#btn').click(function() { $('html,body').animate({scrollTop: '0px'}, 800); var container = $('#...
在页面中有overflow-y:auto属性的div,当出现滚动条，点击返回顶部按钮，内容回这个div最顶部...
weixin_30849403的博客
07-21 517
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .lala{ ...
输出斐波那契数列直到溢出
05-06
在编程中，当斐波那契数达到一定大小时，可能会导致整数溢出，因为超过了数据类型的限制。 描述中的"write a program tg\ fd"可能是一个打字错误或者不完整的指令，但我们可以推测它是在提示你需要编写一个程序，...
js 滚动到顶部（overflow:auto），以及全局window的滚动到顶部和底部
PrimaryColor
03-30 1670
可滚动区域的滚动到顶部,jquery实现，代码： //调用 addScrollTop("box",function(){ console.log("滚动到顶部为0"); }); /** * 滚动到顶部（针对overflow:auto的) * id:可滚动区域的id * callback为触发后执行的回调 **/ function addScrollTop(id,callback){ $("#"+id).scroll(function() { if ($("#"+
设置overflow-x: auto如何让其内容滚动到指定位置
qq_43053533的博客
11-16 4284
需求： 当给父元素设置overflow-x: auto后，需要它的选中了的子元素滚动到当前位置显示。 图一为第一个子元素的内容，图二为效果图。 实现： 首先获得需要滚动的元素距离父元素的位置，.resources_x[file="'+resource_id+'"]为蓝色的块元素，是resources_cont的子元素。 data = $('.resources_cont').find('.resources_x[file="'+resource_id+'"]').position().left 然后设
CSS实现div吸顶，页面滚动导航栏置顶
weixin_39720896的博客
04-14 1616
还需要设置模块的高度才行，这个高度设置完之后，发现浏览器的窗口大小不一致，会导致置顶模块的高度也不一样，无法自适应。最近做了一个前端小需求，不论页面怎么样滑动，让进度条模块进行置顶显示；找的方法都是通过使用监听形式，超过一定高度来使用。是粘性定位，不超出视图就是。
vue2项目中在一个固定大小的盒子里设置了overflow-x：auto控制屏幕不回左右滑动
m0_73154039的博客
06-15 155
样式属性，或者设置不正确导致的。通常情况下，当一个盒子里面的内容超出了它的大小时，我们可以设置。设置为与固定大小的盒子相同，这样可以确保内容不会超出盒子的大小。在 Vue2 项目中，如果在一个固定大小的盒子里设置了。，但是屏幕仍然可以左右滑动，可能是因为没有设置。在这种情况下，我们可以将。
overflow：auto导致的pusition：absolute绝对定位失效
Laoqina的博客
07-30 810
1、需求在希望文件夹列表过长时右下角展示一键置顶功能2、使用element-ui组件库，backtop组件4、页面效果。
overflow：auto的用法和实现弹性盒横向滚动
YY的博客
09-29 1万+
overflow：auto的用法、实现弹性盒横向滚动
滚动条如何设置样式和滚动条悬浮显示与隐藏
weixin_44784401的博客
04-13 1万+
滚动条如何设置样式和滚动条悬浮显示与隐藏
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
CSS样式：max-height和overflow auto始终显示垂直滚动条
weixin_59250190的博客
09-29 2685
这个问题是因为父元素和所有子元素的和高度相同，论坛搜索到一个解决方法，可以给父元素加上一条css属性：line-height：1，即可解决该问题。如果该方法解决不了，也可以给父元素增加一个上下的内边距，解决父元素与子元素高度相同这个问题：padding：1px 0；
div中打开滚动条与设置滚动条位置
暄妍丶的博客
10-22 7651
div中打开滚动条与设置滚动条位置一、给div设置滚动条二、设置滚动条的位置通过锚点跳转设置scrollTop的值 当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了 一、给div设置滚动条 我们只需要这么一行css代码 overflow: scroll; 如果我们只想添加高度滚动条,我们可以使用下面的语句 /*设置纵向滚动栏*/ overflow-x: scroll; /*设置横向滚动栏*/ overf
overfolw
05-29
overflow 是 CSS 中的一个属性，用于控制元素内容超出容器时的表现形式。 常见的取值有： 1. visible：默认值，超出容器范围的内容显示在容器外面。 2. hidden：超出容器范围的内容被隐藏，不可见。 3. scroll：超出容器范围的内容将显示在容器内，但是会出现滚动条以便用户可以滚动查看超出容器范围的内容。 4. auto：超出容器范围的内容将显示在容器内，如果内容可以在容器中放下，则不会出现滚动条。如果内容不能在容器中放下，则会出现滚动条以便用户可以滚动查看超出容器范围的内容。 例如： ``` div { width: 200px; height: 100px; overflow: scroll; } ``` 这会将 div 容器的内容超出容器范围时显示滚动条以便用户可以滚动查看。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值