overflow-y:auto 回到顶部

最新推荐文章于 2024-05-17 13:52:13 发布
VIP文章 最新推荐文章于 2024-05-17 13:52:13 发布
阅读量1.7k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wangxiaoce/p/6629604.html
版权

overflow-y    　　　　内容溢出元素框时发生的事情。

overflow-y:auto        内容溢出元素框时自动出现滚动条，滑动滚动条显示溢出的内容。

滚动条回到顶部

var container = $('#id');//获取元素
$(container).scrollTop(0);//滚动条回到顶部

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 
 4 <head>
 5     <title> overflow-y 回到顶部 </title>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <script type="text/javascript" src="./jquery-3.2.0.js"></script>
<
最低0.47元/天 解锁文章
didiedou3444
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
overflow-y:auto的使用，div中内容超出指定高度，出现滚动条
qq_39822451的博客
09-18 1万+
// 当div中内容高度超过600px，会出现纵向滚动条 &lt;div id="allPageBean" style="height:600px;overflow-y:auto"&gt;&lt;/div&gt;  
CSS中overflow-y: visible;不起作用的原因分析及解决方法
09-22
小编最近遇到这样的需求，移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法，需要的朋友参考下吧
overflow-y: auto；解决页面出现滚动条导致背景色未铺满的情况
qq_41910413的博客
04-20 1906
前端页面会遇到页面要设置全局背景色，但是一旦内容过多，页面出现滚动条，就会发现，怎么滚动到下面，背景色不是全部铺满的，超出一屏的内容是没有背景色的。这时候就可以给页面最外层标签加上。就会发现背景色被完全铺满了。
overflow-y:auto(隐藏滚动条)
m0_61096379的博客
08-27 2075
滚动条隐藏
关于使用overflow-y auto不生效的问题
qq_40703755的博客
12-20 5694
如果父容器高度为百分比，子容器根据父容器百分比设置，整个overflow属性都会失效。实现overflow的效果必须有一个固定高，父容器也必须是固定的高。
CSS3：overflow属性详解
热门推荐
小谭鸡米花的博客
10-30 2万+
1.Overflow overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来； 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto； overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条， 滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值。
关于使用overflow-y:auto；不生效的问题
Jet_Lover的博客
12-15 1万+
使用overflow-y: auto;不生效
解析css中的overflow属性
m0_68845148的博客
11-10 3620
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow
weixin_44867717的博客
03-02 3156
css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow: ellipsis 1、文字换行 元素明明设置了宽度,但是竟然溢出了,添加上以下代码让其自动换行 .wg-width{ display:inline-block; width:320px; line-height: 18px; word-wrap: break-word //自动换行 } 2、
css基础--overflow一
chujinmaolu的博客
06-30 2343
1、overflow剪裁界线border box overflow:hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响，overflow:hidden声明不会影响元素原先的流体特性或宽度表现。overflow属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪，也就是“结界”只是其衍生出来的特性，“剪裁”才是其本职工作。 一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，类似于下面的CSS代码： .box { width: 2
overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动
07-09
) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。 用法 假设您没有为您的网站使用特别奇特的架构，只需将 repo 中的文件放入...
postcss-overflow-shorthand:在 CSS 中使用溢出速记
07-24
overflow-y : auto; overflow : hidden auto; } 用法 将添加到您的项目中： npm install postcss postcss-overflow-shorthand --save-dev 将其用作插件： const postcss = require ( 'postcss' ) ; const ...
react-native-overflow-view:一个View封装的容器组件
04-28
react-native-overflow-view一个View封装的容器组件。可以使android子组件像ios一样溢出容器。安装步骤安装依赖yarn add react-native-overflow-view或者npm install react-native-overflow-view --savelink react-...
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
qq_51055690的博客
07-28 4839
css自定义滚动条样式
js 滚动到顶部（overflow:auto），以及全局window的滚动到顶部和底部
PrimaryColor
03-30 1628
可滚动区域的滚动到顶部,jquery实现，代码： //调用 addScrollTop("box",function(){ console.log("滚动到顶部为0"); }); /** * 滚动到顶部（针对overflow:auto的) * id:可滚动区域的id * callback为触发后执行的回调 **/ function addScrollTop(id,callback){ $("#"+id).scroll(function() { if ($("#"+
关于HTML下overflow-y:auto无效、清除HTML默认边距、解决去除手机访问网页时的左右多余空白的三个方法汇总
sinolzeng的专栏
11-22 1万+
在html中，如果想让某个子DIV出现over-flow
js实现回到顶部，以及回到指点div顶部
D_Z_Yong的博客
02-25 2万+
1. 是用锚点回到页面顶部 利用a标签链接实现回到顶部 <body style="height:2000px;"> <div id="top"></div> <a href="#top" style="position:fixed;left:0;bottom:0">我要回到顶部</a> </body> 2. 使用scrollTop或者scrollTo()方法 <body style="height:2000px;"> &l
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 184
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
請你每一條幫我注解#main { height: 500px; /*设定主体内容高度*/ overflow-y: scroll; /*添加滚动条*/ max-width: 1120px; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: 210px; }
06-11
当然，以下是对 #main 样式的注释： ``` #main { height: 500px; /*设定主体内容高度*/ overflow-y: scroll; /*添加滚动条*/ max-width: 1120px; /*设定最大宽度*/ margin: auto; /*水平居中*/ padding: 20px; /*设定内边距*/ background-color: #fff; /*设定背景颜色*/ box-shadow: 0 2px 4px rgba(0,0,0,.1); /*添加阴影*/ position: fixed; /*设定固定定位*/ top: 0; /*距离页面顶部距离为0*/ left: 210px; /*距离页面左侧距离为210px*/ } ``` 其中，注释以 `/*` 开始，以 `*/` 结束。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值