html监听页面滚动高度,html – 浏览器垂直滚动条的高度限制

叁歲伎倆 2022-10-06 03:57 180阅读 0赞

从技术上讲,只要任何一个元素不超过最大高度,这是可能的.但是出于实际目的,这是不可能的,因为一旦整体身高超过极限,浏览器行为会变得怪异.

这实际上似乎在IE11中正常工作：

div\{

background: red;

color: white;

height: 10737418px;

\}

.blue \{

background: blue;

color: white;

\}

Test

Test

Test

Test

所有四个div都显示应用了CSS.您可以搜索单词“test”,它将四次滚动到该单词.

在Firefox中,可滚动高度将大于最大大小,但它将停止渲染其下方的任何内容：

div\{

border: 3px solid purple;

height: 17895697px;

\}

.blue \{

background: blue;

color: white;

\}

.red \{

background: red;

color: white;

\}

Test

Test2

Test3

第一个盒子有3px紫色边框. Firefox甚至不会渲染底部边框,其他2个div根本不可见.浏览器可以告诉页面中的“test”一词3次,但使用“Find”不会使页面滚动到其他div.它只是坐在那里.

在Chrome中,事情变得奇怪：

div\{

border: 3px solid \#000000;

background: \#CCCCCC;

height: 99999999999999999999999999999999999999px;

\}

Test

Test2

Test3

第一个div根本没有边框,然后由于某种原因,div边框在第一个div之后反复重复,即使页面中只有两个其他div. Chrome的“查找”确实识别出“测试”这个词只在页面中出现3次,但它认为后两个词位于页面的最底部.第二次或第三次看不到“测试”这个词.

如果将高大的元素放在具有固定高度和溢出设置为滚动的容器中,则会出现其他奇怪的行为.

我能看到解决这个问题的唯一方法是确保页面高度不超过限制.

如果它是静态内容,只需将其分解为多个页面即可.

如果是动态内容,您可以：

>在生成指向其他页面的链接之前,对页面上放置的内容设置任意限制

>限制一次可见的内容量

> EX：带有手风琴布局的FAQ页面,因此您必须单击问题才能显示答案,并且一次只能看到一个答案

>限制返回的记录/结果数量>隐藏/折叠/删除用户滚过的内容(我没有尝试过,但是如果你能做到这一点,我不明白为什么它不起作用.)

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度

1、获取页面滚动高度 > `document.documentElement.scrollTop` 2、什么时候获取页面滚动高度 > 路由变化，离开当前页面时，可

淡淡的烟草味﹌/ 2022年12月12日 15:08/ 0 赞/ 430 阅读

相关 html热点新闻滚动,js监听html页面的上下滚动事件方法

最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示： ![01624de29d

ゝ一世哀愁。/ 2022年10月06日 10:57/ 0 赞/ 154 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 281 阅读

相关 html监听页面滚动高度,html – 浏览器垂直滚动条的高度限制

从技术上讲,只要任何一个元素不超过最大高度,这是可能的.但是出于实际目的,这是不可能的,因为一旦整体身高超过极限,浏览器行为会变得怪异. 这实际上似乎在IE11中正常工作：

叁歲伎倆/ 2022年10月06日 03:57/ 0 赞/ 181 阅读

相关 [javascript] js 获取页面可视区高度和滚动条高度

获取可视区高度： var clientHeight = document.documentElement.clientHeeight ;

分手后的思念是犯贱/ 2022年08月11日 00:48/ 0 赞/ 191 阅读

相关 js获取滚动条距离浏览器顶部,底部的高度

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一

素颜马尾好姑娘i/ 2022年07月16日 02:12/ 0 赞/ 259 阅读

相关 HTML滚动条

滚动条第一种方式： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

浅浅的花香味﹌/ 2022年07月11日 01:50/ 0 赞/ 213 阅读

相关 javascript 获取滚动条高度+常用js页面宽度与高度

/\\\\\\\\\\\\\\\\\\\\ \ 取窗口滚动条高度 \\\\\\\\\\\\\\\\\\/ function getScrollTop()

爱被打了一巴掌/ 2022年06月12日 04:53/ 0 赞/ 189 阅读

相关 echarts设置图表滚动条设置滚动条高度

在option配置项中设置dataZoom属性即可，height即可指定滚动条的高度，这里我就设置14。 dataZoom: [

￡神魔★判官ぃ/ 2022年03月12日 10:50/ 0 赞/ 1282 阅读

相关小程序获取页面滚动的高度

wx.createSelectorQuery().select('the-id').boundingClientRect(function(rect){

待我称王封你为后i/ 2022年01月25日 23:55/ 0 赞/ 1094 阅读