纵向滚动问题记录

最新推荐文章于 2023-08-29 15:21:09 发布

Dickence

最新推荐文章于 2023-08-29 15:21:09 发布

阅读量165

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/dickence/article/details/104668299

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Angular开发个聊天室组件时，遇到一个小问题，使用TS把DIV滚动至底部，代码如下：

    // rd: Renderer2
    this.rd.setProperty(this.chatMessage.nativeElement,
      'scrollTop', this.chatMessage.nativeElement.scrollHeight);

还使用了jQuery, javascript等多种方式，结果无效

后意识到可能是DIV的高度过高，看到的滚动条很可能是Body的滚动条。为DIV设定一个高度，问题解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dickence

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS实例——间歇循环滚动（纵向）

One1Bean的博客

06-22

1605

<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="关键字

纵向滚动通知

备忘录

10-16

635

纵向滚动通知垂直跑马灯自定义控件ScrollNotification（extends ViewFlipper）

参与评论您还未登录，请先登录后发表或查看评论

css实现横纵向滚动

Eatin

08-10

8845

.parent{ white-space: nowrap; //阻止文本换行 overflow: auto; //设置溢出可滚动 } .child{ display: inline-block; //设置属性（元素间不换行） }

html 纵向滚动条,css设置纵向滚动条

weixin_39621488的博客

05-30

1万+

css 怎样设置总是显示竖滚动条给元素设置样式overflow-y:scroll; 和一个高度，当内容填满后就会出现下拉的滚动条了。CSS 如何添加水平滚动条CSS 如何添加水平滚动条我知道怎么加垂直滚动条设置 overflow 属性： div { width:150px; height:150px; overflow:auto; }overflow属性如下: auto：当此div子元素宽和高大...

原生纵向滚动与横向滚动，完美解决滚动问题

赛朋博客 2077

11-09

1623

纵向滚动与横向滚动 1 原理先来看一下浏览器的滚动原理：当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。同理当子元素内容高度或宽度超过父元素后，父元素也会产生滚动条。所以我们需要准备以下 DOM 结构： DOM 结构分为三层，wrapper => content => item wrapper: 可视区 or 滚动区，一般是有固定高度的容器 c

jquery scroll()区分横向纵向滚动条的方法

10-26

然而，在某些情况下，我们可能需要区分是横向滚动还是纵向滚动，特别是在页面中存在多个可滚动区域时。本文将详细介绍如何使用jQuery的 `scroll()` 方法来区分横向和纵向滚动条。首先，我们要明白 `scrollLeft` 和...

uniapp scroll-view 横向和纵向滚动带滚动回调

最新发布

09-10

4. **横向和纵向滚动**：`scroll-view`组件可以通过设置`scroll-x`和`scroll-y`属性来控制滚动方向。当`scroll-x`设为`true`时，组件将支持水平滚动；当`scroll-y`设为`true`时，组件将支持垂直滚动。同时，这两个...

RecyclerView实现纵向和横向滚动

01-04

纵向滚动 1、添加依赖库：打开app/build.gradle文件，在dependencies闭包中添加如下内容（compile ‘com.android.support:recyclerview-v7:24.2.1’为添加的内容） dependencies { compile fileTree(dir: 'libs...

H5实现中奖记录逐行滚动切换效果

08-31

"H5实现中奖记录逐行滚动切换效果" H5实现中奖记录逐行滚动切换效果是指在前端页面中，使用JavaScript和CSS实现中奖记录逐行滚动切换的效果。这种效果可以使页面更加生动和有趣，提高用户体验。实现这种效果需要...

将滚动条一直置于页面底部最简单的方法

小草莓的博客

09-30

2365

将滚动条所在的盒子的scrollTop设置等于盒子的滚动高度：div.scrollTop = div.scrollHeight

项目中遇到的难题，vue3+ts

m0_46423771的博客

08-29

254

原因：详情页面中引入了十几个组件，且每个组件的v-if都写在各自的computed中，监听详情接口返回之后再判断当前的组件显示与否，以及是否要禁用组件中的输入，这导致详情页面第一次加载的时候，需要等待十几个computed的反应。问题：从列表页面点击数据的id列跳转到详情页面的时候，路由跳转非常的缓慢，且有时候路由变了，但是页面没有跳转，只有手动刷新页面才行。原因：赋值的对象没有找对，每次页面加载完毕之后，之前找的视口区域div和滚动区域的div的高度都是一致的。解决办法：视口区域的div得再往上找一层。

滚动条事件window.onscroll

weixin_30631587的博客

11-16

1725

获取页面某一元素的绝对X,Y坐标 varX = $('#ElementID').offset().top; varY = $('#ElementID').offset().left; 获取相对(父元素)位置: varX = $('#ElementID').position().top; varY = $('#ElementID').position().left; ...

vue 点击按钮后滚动条到底部

关凯华の的博客

02-26

1227

解决移动端有纵向滚动条但是不能滚动的问题

qq_45152044的博客

08-01

4707

解决移动端有纵向滚动条但是不能滚动的问题

判断滚动条滚到底部

weixin_34220623的博客

11-16

521

原理：文档高度 = 视口高度 + 滚动条高度 1.若是一整个浏览窗口的滚动条： $(window).scroll(function () { var documentHeight = $(document).height();//1188 var windowHeight = $(window).height();//706 var scrollTop = $(documen...

前端如何用观察者设计模式实现页面滚动到底部请求下一页数据

yangxbai的博客

07-30

1421

前端如何用观察者设计模式实现页面滚动到底部请求下一页数据

Echarts 横向滚动和纵向滚动开发