scrollTop设置滚动定位的兼容问题

news2024/11/22 15:32:57

功能说明:详情页,点击评价页签会滚动定位到评价部分,点击详情会滚动到详情介绍部分,非tab切换。在不同型号手机有的会失效,原先代码:

if(document.body.scrollTop){
	document.body.scrollTop = 100;
}else{
	document.documentElement.scrollTop = 100;
}

调试后发现有个别手机使用document.body.scrollTop设置生效但页面未滚动时会出现document.body.scrollTop值为0(number类型)的情况,此时就走else啦
当前文档的渲染模式是怪异模式/混杂模式还是标准模式
let mode = document.compatMode;mdn截图在这里插入图片描述
现在文档多数会在html中设置成标准模式<!DOCTYPE html>,会获取到compatMode为“CSS1Compat”,但并不能保证使用document.documentElement.scrollTop 设置会生效。此次实践中ios出现此问题。

正确做法
1.scrollTop取值操作

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

2.scrollTop赋值操作

document.documentElement.scrollTop = 100;
document.body.scrollTop = 100;

取值比较好理解,用‘或’就可以。
赋值的话,两个属性页面未滚动情况下,值都为0,两个语句都走一遍不会报错,仅一个可赋值成功另一个应该是只读,再次读取值仍然为0。

参考:
https://juejin.cn/post/6847902220604669960
http://www.hzhcontrols.com/new-268927.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1289467.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SSM的食品安全追溯系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

智慧配电运维系统解决方案

智慧配电运维系统依托电易云-智慧电力物联网&#xff0c;是一种基于云计算、物联网、大数据等先进技术的配电室运维管理系统&#xff0c;具有实时监测、智能分析、远程控制等特点&#xff0c;可以提高配电室的安全可靠性、运行效率和管理水平。 智慧配电运维系统解决方案通过以…

Vis.js教程(四):给关系图的节点设置Image背景

1、引言 在Vis.js教程三中我们介绍了如何给关系图设置关系指向以及关系标签。 本节我们计划给关系图节点设置背景&#xff0c;拿菲尼克斯太阳队关系图的例子来说&#xff0c;如果给每一个球员节点都加上图片&#xff0c;这样看起来远远比名称更直观。 2、添加节点背景图片 …

文献速递:多模态影像组学文献分享(一种诊断方法结合了多模态放射组学和基于腰椎CT及X光的机器学习模型,用于骨质疏松症)

文献速递&#xff1a;多模态影像组学文献分享:(一种诊断方法结合了多模态放射组学和基于腰椎CT及X光的机器学习模型&#xff0c;用于骨质疏松症)** Title 题目 A diagnostic approach integrated multimodal radiomics with machine learning models based on lumbar spine CT…

LT8668SXC HDMI转edp1.4/VBO 最高支持8k60hz

HDMI2.1 Receiver ▪ Compliant with HDMI2.1, HDMI2.0b, HDMI1.4 and DVI1.0 ▪ Data rate up to 8Gbps ▪ Support HDCP 1.4/2.3 ▪ Support HDCP repeater ▪ Support RGB 8/10/12 bpc, YCbCr4:4:4/ YCbCr4:2:2/ YCbCr4:2:0 /8/10/12 bpc ▪ Support up to 8K3…

Windows 10 11黑屏死机的修复经验分享

1. 执行快速重启 有时,您所需要的只是重新启动。 您可能会惊讶地发现,只需快速重新启动即可解决 Windows 操作系统上的许多问题,尤其是在系统已经运行了一段时间的情况下。 因此,在进行任何复杂的操作之前,请重新启动电脑,看看它是否修复了电脑上的黑屏错误并使一切恢复…

docker 的初步认识,安装,基本操作

docker相关知识 docker的相关概念 docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。 docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的linux服务器&#xff0c;也可以实现虚拟…

html实用入门

html里只需要掌握以下标签即可&#xff1a; div/span/h1-h6/i/strong/a/img/video/img/input/textarea/button 块状元素 1\<div>&#xff1a;通常用于包含多个元素并组织布局 一个div盒子独占一行 <p>&#xff1a;文本段落。 2\<span>:是一个行内元素&a…

leetcode 1658. 将 x 减到 0 的最小操作数(优质解法)

代码&#xff1a; class Solution {public int minOperations(int[] nums, int x) {int sum0; // nums 数组中的数据总和int lengthnums.length;for(int i0;i<length;i){sumnums[i];}int targetsum-x; //待查找的子数组的和if(target<0){return -1;}//采用滑动窗口的…

数据结构与算法编程题42

试编写一个算法&#xff0c;判断给定的二叉树是否是二叉排序树。 //参考博客:https://blog.csdn.net/weixin_44162361/article/details/119112155 #define _CRT_SECURE_NO_WARNINGS #include <iostream>//二叉排序树&#xff08;Binary Sort Tree&#xff0c; BST&#x…

Screenshot To Code

序言 对于GPT-4我只是一个门外汉&#xff0c;至于我为什么要了解screenshot to code&#xff0c;只是因为我想知道&#xff0c;在我不懂前端设计的情况下&#xff0c;能不能通过一些工具辅助自己做一些简单的前端界面设计。如果你想通过此文深刻了解GPT-4或者该开源项目&#…

电气火灾监控系统

电气火灾监控系统是一种用于预防电气火灾的监控解决方案&#xff0c;可以实时监控电气线路和设备的运行状态&#xff0c;及时发现和处理潜在的电气火灾安全隐患。 该系统的主要功能和优势包括&#xff1a; 实时监控&#xff1a;电气火灾监控系统可以实时监控电气线路和设备的电…

Vue学习计划-Vue2--Vue核心(二)Vue代理方式

Vue data中的两种方式 对象式 data:{}函数式 data(){return {} }示例&#xff1a; <body><div id"app">{{ name }} {{ age}} {{$options}}<input type"text" v-model"value"></div><script>let vm new Vue({el: …

html实现好看的个人博客留言板源码

文章目录 1.设计来源1.1 博客主界面1.2 常用源码1.3 我的文章1.4 留言板1.5 联系我 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134837482 html实现好看的个人博客留言…

数据结构与算法编程题41

线性表中各结点的检索概率不等时&#xff0c;可用如下策略提高顺序检索的效率&#xff1a; 若找到指定的结点&#xff0c;则将该结点和其前驱结点&#xff08;若存在&#xff09;交换&#xff0c;使得经常被检索 的结点尽量位于表的前端。试设计在顺序结构的线性表上实现上述策…

实现个微群聊机器人的二次开发

请求URL&#xff1a; http://域名/finderUserHome 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识userName是Str…

Java抽象类(abstract class)和接口(interface)的区别——面试

1.抽象类&#xff08;abstract class&#xff09;和接口&#xff08;interface&#xff09;的区别&#xff1a; 抽象类可以有构造方法&#xff0c;接口中不能有构造方法。 抽象类中可以有普通成员变量&#xff0c;接口中没有普通成员变量。抽象类中可以包含非抽象的普通方法&am…

m1源码编译xgboost的动态链接库dylib

1、下载源码 git clone --recursive https://github.com/dmlc/xgboost cd xgboost拉取源码时候&#xff0c;一定要加"--recursive"这个命令。把它的字模块也要拉取下来&#xff0c;才能编译成功 2、安装c依赖 必要的依赖项(不然后续编译时报错)&#xff0c;包括CM…

微信小程序模板选择指南:如何找到靠谱的平台?

随着移动互联网的快速发展&#xff0c;越来越多的企业和商家都在微信小程序上开展业务。而他们也希望可以通过微信小程序模板快速搭建小程序&#xff0c;那么如何才能找到一个靠谱的微信小程序模板平台呢&#xff1f;下面给大家简单讲解一下。 首先要知道的是&#xff0c;微信小…

我一人全干!之vue3后台管理中的大屏展示。

使用大屏展示的时候有很多种场景&#xff0c;众多场景都是为了实现大屏自适应。 大屏&#xff0c;顾名思义&#xff0c;就是放在一个固定的屏幕上看的&#xff0c;即使你不做自适应&#xff0c;放在一个固定的屏幕上看也没啥问题&#xff0c;但是很多做大屏的是为了在PC端看&am…