元素设置overflow-y:scroll如何判断元素内滚动到最底层

最新推荐文章于 2024-08-13 11:25:08 发布
最新推荐文章于 2024-08-13 11:25:08 发布
阅读量7.2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34341290/article/details/53397222
版权

元素设置overflow-y:scroll如何判断元素内滚动到最底层

今天在项目中遇到一个这样的问题，一个元素高度设置死：800px；超不部分滚动，里面的子元素是未知ajax加载的，如何判断是不是滚动到最底层呢？

如下图：

scrawl.png

用jquery $(box).height(); //获取元素高度

$(box).scrollTop();//获得元素的滚动条高度

给元素内部增加一个子元素box2,然后把数据加载到box2里面，这样直接获取box2的高度 减去 元素的高度 是不是等于 元素的scrollTop 就可以判断啦！

如下图：box2是红色边框的

scrawl.png

yang洋PHPer
关注
html scroll 自动,html – DIV设置为overflow：scroll,但不会一直滚动到底部
weixin_42303389的博客
05-30 877
我有一个DIV菜单设置为100％的高度与溢出：滚动.在DIV里面我有一个ul li.我的问题是,它不会让我滚动一下看到最后一个李.我几乎看不到它.我认为它与我的标题有关,因为当我删除标题时,我可以看到它.当我放回标题时,它会放在浏览器下方,不能一直滚动到最后一个li.li和header几乎是相同的高度,这是很有意义的头是导致问题.不是特别的标题,我想,但更多的是我在CSS中做的事情.为什么不能滚动...
scroll 进入页面，默认滑动到底部，并对滑动跳进行修改
山谷里的杂货铺
10-14 293
刚进入页面时，使得页面滑动到盒子底部 <div class="swapper" ref="scroll"> <div class="item" v-for="(item, index) in signInList" :key="index" @click="toPage"> <img class="avatar" :src="item.avatar" alt="头像" /> <div cl...
overflow 监听是否滑动到底部
唐僧的专栏
05-18 1568
overflow 监听是否滑动到底部
滚动条属性overflow
最新发布
m0_69876298的博客
08-13 331
滚动条属性overflow
vue给某元素设置滚动到底部触发事件（给元素添加overflow:scroll时的问题）
sslcsq的博客
04-02 3867
在vue中如果你给某元素设置overflow:auot或者overflow:scroll时这样可以让超出可视区的内容可以滚动 但是如果这个时候在给让设置滚动到底部触发事件会有问题那就是只要你滚动就是立即触发这个事件 所以基于这点我改了一下代码效果不错 直接上代码 <template> <div class="list"> <div class="heade...
overflow滚动条属性
于大大大洋
12-23 1560
做网页的时候，因为网页内容的长短不一样，并且滚动条的策略默认是自动，所以网页的滚动条根据内容一会有一会没有。 我的网页做的是居中的，所以滚动条在有和没有的时候，会影响网页内容的位置，这样感觉不太好，找了找滚动条的样式。 overflow属性和取值： visible      默认值。内容不会被修剪，会呈现在元素框之外。  hidden       内容会被修剪，并且
jq判断scroll是否到底部
晨露
08-11 1713
首先，我们要获取三个高度： 1. 整体div的高度. 2. 超出盒子部分就添加overflow:scroll的盒子高度 3. 超出盒子部分就添加overflow:scroll的盒子距离滚动条顶部的高度
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3184
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
13-Vue长列表优化 vue-virtual-scroller
iaz999的博客
07-10 6038
回答：在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿白屏数据渲染较慢的问题；这种情况主要发生在小程序、移动端或者后台管理的页面当中；通常我们会采用分页的方式进行内容的逐渐获取，但是当内容越来越多时；比如移动端的下拉刷新，不停的往上翻，到底部会加载更多内容，这样一来列表中会新增很多的元素，元素多了以后会触发浏览器的重排重绘，无论是内存的占用还是GPU的渲染都会带来很大的性能损耗，导致页面滑动卡顿数据渲染较慢。
CSS的学习记录
m0_60518344的博客
08-17 201
CSS分为两部分：CSS的选择器, CSS的属性。 CSS的引入方式 - 内联样式(行内样式) 缺点：样式与结构冗余 优点：优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中 注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。 代码： 效果： - 内部样式表 缺点：样式的复用率较低 优点：样式与结构分离 内部样式表可以同时为多个元素设置样式 注意点: -style标签要写在head标
简历资料
刘群智的博客
07-27 1833
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
HTML+CSS----------HTML5+CSS3
qq_31913969的博客
09-04 993
html回忆录 1、网页的组成：图片、文字、超链接、视频、音频等 2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS). 3、Chrome浏览器的内核：Blink；苹果内核：webkit; 4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。 5、超文本指的是超越文本的限制，超级文本链接 6、内核渲染HTML和CSS 7、 8、 ...
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
liuhao9999的博客
06-28 1万+
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
每添加一条消息就让滚动条滚到最底部
m0_65812066的博客
01-11 552
添加新消息的两种清空：1.用户互动发送2.客服发送消息所以我们最后封装一个函数专门处理滚动条到最底部在发布消息 / 接收到消息的时候, 调用。
让DIV的滚动条自动滚动到最底部的3种方法
最是人间留不住，朱颜辞镜花辞树。
02-20 2万+
方法一： 使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="text/javascript"> function onGetMessage(context) { msg.innerHTML+=context; msg_end.click(); } </script> <div style="width:500px;overflow:auto"> <div
小程序scroll-view自动滚动到底部
D丶bird
07-15 2609
最近在做直播，其中有多人聊天。当人发送消息后要自动滚动到底部。上代码 <scroll-view scroll-y="true" scroll-into-view="{{toast}}" style="height:100%;"> <block wx:for="{{talk}}" wx:key="index"> <view class="chat-her" id="item{{index}}" wx:if="{{item.type == 'h
css 滚动到底部动画，滚动某个区域到底部（推荐版本）
PrimaryColor
03-03 3106
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html
scroll不能滑动到最底部解决方法
m0_66975650的博客
07-20 1953
uni-app解决 scroll 滑动底部被遮挡
overflow: scroll隐藏滚动条的问题
热门推荐
sinat_25017107的博客
07-15 5万+
最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题。对于隐藏滚动条，我们最常用的方法首先是：1、使用以下CSS可以隐藏滚动条：.container::-webkit-scrollbar {display:none}但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome2、为了兼容其他的浏览器，可以用这样的方法：在滚动区域外再套一层div，给这层div设置overflow:...
overflow-y: scroll;横向滚动示例
06-02
抱歉，我之前的回答有误，`overflow-y: scroll;` 是用来设置元素的垂直滚动条，而不是水平滚动条。如果需要水平滚动条可以使用 `overflow-x: scroll;`，若需要同时控制水平和垂直滚动条，则可以使用 `overflow: scroll;`。以下是一个示例： HTML 代码： ``` <div class="container"> <div class="content"> <p>这是一段很长的文本，需要滚动才能查看完整内容。</p> </div> </div> ``` CSS 代码： ``` .container { width: 200px; height: 100px; overflow: scroll; /* 同时控制水平和垂直滚动条 */ } .content { width: 300px; height: 200px; } ``` 在以上示例中，`.container` 元素设置了固定的宽度和高度，并且使用 `overflow: scroll;` 来同时控制水平和垂直滚动条。`.content` 元素则设置了一个比 `.container` 元素更大的宽度和高度，使得其内容超出了 `.container` 元素，从而触发滚动条。用户可以通过滚动条来查看完整的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值