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

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

这实际上似乎在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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值