页面无法获取滚动条的高度

article/2024/12/29 9:01:31

页面无法获取滚动条的高度,值为0

虽然网上有很多解决无法获取滚动条的高度,正常来说只需要做个兼容即可:document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

这可以解决通常遇到的情况,但是我遇到的情况是,个别浏览器(搜狗浏览器、微信浏览器、小米自带浏览器)仍然无法获取滚动条的高度,值为0。

以搜狗浏览器为例,图1可以获取滚动条高度,图2获取一直为0
这里写图片描述 图1
这里写图片描述 图2

区别在于图1是body的滚动条,图2是body内某元素的滚动条,此时某些浏览器无法识别出滚动条的高度,因此值为0。

解决方法:不要设置body的overflow(包括overflow-x、overflow-y)



http://chatgpt.dhexx.cn/article/nOLk5a8D.shtml

相关文章

小程序获取滚动条高度以及返回顶部

第一:获取滚动条高度 onPageScroll: function (e) {console.log(距顶距离,e.scrollTop)}, 第二:返回顶部 //回到顶部goTop: function (e) {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: 提示,content: 当前微信…

js 获取页面的滚动高度

想要获取页面的滚动位置可以通过给window绑定滚动事件来实现。 window.addEventListener(scroll,()>{const n document.documentElement.scrollTopconsole.log(n);}) 通过该方法可以获取页面的当前位置,或者实现其他的效果,例如电梯导航

js获取滚动条的位置

一.获取当前页面滚动条纵坐标的位置 document.body.scrollTop与document.documentElement.scrollTop IE6/7/8/IE9及以上: 可以使用 document.documentElement.scrollTop; Safari,Firefox:,Chrome: 可以使用 document.…

Django常见面试题总结(二)

接上篇文章:https://blog.csdn.net/YZL40514131/article/details/125813096?spm1001.2014.3001.5501 二十一、selected_related与prefetch_related有什么区别?(重要) 在Django中,所有的Queryset都是惰性的,意思是当创建一个查询集的时候&a…

【django】django面试题总结

一、django中间件的使用 Django在中间件中预置了六个方法,这六个方法的区别在于不同的阶段执行,对输入或输出进行干预,方法如下: 1.初始化:无需任何参数,服务器响应第一个请求的时候调用一次,…

python—Django面试题汇总

django面试题 1. Django架构:MVT: Django遵循MVC设计,并有一个专有的名词:MVT 1.M全拼为Model,与MVC的M功能相同,负责数据处理,内嵌了ORM框架。 2.V全拼为View,与MVC中的C功能相同,接收HttpRe…

超详细的Django面试题

Hello,我是 Alex 007,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了。 框架层 01.什么是Django框架?(初级) Django是一个开放源代码的Web应用框架&am…

django面试题总结

列举HTTP中常见的请求方式 HTTP请求的方法: HTTP/1.1协议中共定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式 注意: 1)方法名称是区分大小写的,当某个请求所…

Django 面试题

过完年后,就是春招了,是找工作的好时机,找工作或换工作的同学需要好好准备一下面试了,最近我精选了 10 个关于 Django 的面试题,如果要看更多面试题目,请在公众号后台回复「面试」获取。祝你新的一年&#…

Django常见面试题总结(一)

一、ORM是什么?优势? ORM:中文翻译为对象关系映射。 模型类名对应数据库表名 类属性对象数据库表字典 类属性中的字段对应数据库中的约束条件 模型类的多个实例对应于实例 优势: orm的技术特点,提高了开发效率&#xf…

Django面试题

目录 1 列举Http请求中常见的请求方式 2 谈谈你对HTTP协议的认识 3 简述MVC模式和MVT模式 4 简述Django请求生命周期 5 简述什么是FBV和CBV 6 谈一谈你对ORM的理解 7 rest_framework 认证组件的流程 8 什么是中间件并简述其作用 9 django 中间件生命周期 10 django中…

2020年最新Django经典面试问题与答案汇总(上)-大江狗整理

周末抽空整理了下Django经典面试问题及答案,希望对小伙伴们学习和工作有所帮助。如果小编我是负责招聘Python Web或Django开发人员的面试官,我也会考虑问如下问题。从下面可以大致了解一个面试者对Django技术的了解程度。由于篇幅所限,本文将…

用HTML5制作的3D相册

HTML5 非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片,…

HTML5制作信息登记表

# 制作信息登记表#样式需求分析: 一、 通过最外层的大盒子对页面进行整体控制,设置宽高、背景图片及相对定位。 二、 通过标记对表单进行整体控制,对其设置宽高、边距、边框样式及绝对定位。 三、 通过 标记控制标题的文本样式,对其设置…

HTML5制作二级菜单(主菜单的子菜单)

HTML5制作二级菜单&#xff08;主菜单的子菜单&#xff09; 一、HTML文件代码二、 CSS文件代码三、效果图 一、HTML文件代码 <!--submenu.html--> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><link r…

制作HTML5海报

一、HTML5海报有什么卵用&#xff1f; HTML5海报作用跟一般的海报差不多&#xff0c;但是拥有更生动的灵活的页面和便捷快速的传播途径&#xff08;网络&#xff09;。不仅可以在微信公众号中推广&#xff0c;也可以在票圈&#xff0c;空间&#xff0c;群上推广。做得好的海报&…

用html5和css制作信息登记表

<!doctype html> <html><head><meta charset"utf-8"><title>信息登记表</title><!-- <link rel"stylesheet" href"style07.css" type"text/css"> --><style type"text/css&q…

html5制作购物车页面,利用html来制作一个简单美观的购物车界面

首先来展示一下购物车界面: (学习视频分享:html视频教程) 这个页面只是实现了其布局视图,没有使用js或者jquery相关语言,在博主看来是比较利于我们将其加入到自己的程序中的以下是相关代码: index.html 商品名称单价数量操作旁氏洗发露991删除旁氏洗发露991<

html5制作圆形

代码如下 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Document</title> <style type"text/css"> .addBg { width: 100px; height: 100px; background-color…

html页面转盘如何实现,html5制作转盘的详解及实例

今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码。html5制作转盘游戏 h1{width: 100%; height: 3rem; line-height: 3rem; font-size: 1.8rem; color:#c60; text-align: center; font-weight: bolder; } KinerLotter—…