当前位置: 首页 > news >正文

JS - 设配设备的的平滑滚动

最近项目需要做一个H5页面的问答类互动,类似向上向下的滚动效果,所以做个总结

一、 CSS

使用CSS的scroll-behavior,可以达到比较平滑的滚动,有过渡效果

scroll-behavior: auto | smooth | inherit | unset
// html
<div id="box"><p id="container">Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/></div><a href="#container" >回到顶部按钮</a>
 // css#box {height: 150px;overflow: scroll;scroll-behavior: smooth;}

这种方法虽然可以平滑滚动到顶部,但是因为a标签的默认行为会给地址加一个hash,这对路由使用hash模式来说会出现问题。

二、ScrollTo

回到顶部
target.clientHeight
// html
<div id="box"><p id="container">Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/><p>Hello, Backtotop</p><br/></div>
<a onclick="up()" href="#">回到顶部按钮</a>
 // css#box {height: 150px;overflow: scroll;scroll-behavior: smooth;}
// js
function up() {const target = document.getElementById("box");target.scrollTo(0, 0);}
回到底部

DOM元素的高度,减去我们视窗的高度,就是底部了

window.scrollTo(0, document.documentElement.scrollHeight - window.innerHeight);
 function down() {const target = document.getElementById("box");console.log("2222",target.scrollHeight, target.clientHeight)target.scrollTo(0, target.scrollHeight - target.clientHeight);}
设备支持情况
  • iOS 13.3 Safari 不支持smooth
  • iOS 11.4.1 Safari 不支持smooth
  • Galaxy S9 Android 9.0 自带浏览器 支持smooth
  • Chrome 79 支持smooth

三、ScrollIntoView

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
// html
<div id="box"><p id="top">Hello, Backtotop</p><br/><p>Hello, Backtotop1</p><br/><p>Hello, Backtotop2</p><br/><p>Hello, Backtotop3</p><br/><p>Hello, Backtotop4</p><br/><p id="bottom">Hello, Backtotop5</p><br/></div><a onclick="up()" href="#">回到顶部按钮</a><a onclick="down()" href="#">回到底部按钮</a>
function up() {const target = document.getElementById("top");target.scrollIntoView(false);
}
function down() {const target = document.getElementById("bottom");target.scrollIntoView(true);
}
设备支持情况
  • iOS 13.3 Safari 不支持smooth
  • iOS 11.4.1 Safari 不支持smooth
  • Galaxy S9 Android 9.0 自带浏览器 支持smooth
  • Chrome 79 支持smooth

四、多设备支持的滚动

以上的方法,安卓大部分都是可用的,IOS虽然也是可以滚动,但是却不支持options,所以无法缓慢滚动,都是一下子滚到底,所以为了让安卓和IOS都能够缓慢滚动,需要有一个兼容性的滚动方案

  function scrollTopSmooth(position, sumTime = 45, target) {// 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(cb) {return setTimeout(cb, 20)}}// 当前滚动高度let scrollTop = target? target.scrollTop: document.documentElement.scrollTop || document.body.scrollTop// 当前滚动对象let scrollTarget = target || window// sumTime 控制滚动速率, scrollTime做判断let scrollTime = sumTime// stepfunction step() {let distance = position - scrollTopscrollTime--scrollTop = scrollTop + distance / sumTimeif (!scrollTime) {scrollTarget.scrollTo(0, position)} else {scrollTarget.scrollTo(0, scrollTop)requestAnimationFrame(step)}}step()}
补充
  1. document.documentElement.scrollTop与document.body.scrollTop

    document.documentElement表示获取到html,document.body表示获取到body。使用document.body.scrollTop获取不到页面滚动的距离,就必须使用document.documentElement.scrollTop来获取。所以一般我们获取滚动距离的兼容代码最好写成这样

    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    
  2. 关于绑定滚动事件scroll

    只有window和document两个能绑定scroll滚动事件,document.documentElement和document.body绑定不起,这个应该跟浏览器内核有关系。

设备支持情况
  • iOS 13.3 Safari 支持
  • iOS 11.4.1 Safari 支持
  • Galaxy S9 Android 9.0 自带浏览器 支持
  • Chrome 79 支持

参考链接
通过图片懒加载引出来的知识点
平滑滚动到顶部或底部的几种方案
完美实现一个“回到顶部”

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

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

PAT (乙级)1014 福尔摩斯的约会 (20 分)C语言

大侦探福尔摩斯接到一张奇怪的字条&#xff1a;我们约会吧&#xff01; 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm。大侦探很快就明白了&#xff0c;字条上奇怪的乱码实际上就是约会的时间星期四 14:04&#xff0c;因为前面两字符串中第 1 对相同的大写英…...

C++学习总结2

&#xff08;1&#xff09; 实参的a和形参的a的数据类型本质不一样&#xff0c;形参中的数组编译器会把它当成指针处理&#xff0c; 调用函数时需将数组名&#xff08;内存首地址&#xff09;和数组的有效长度传给被调用函数。 &#xff08;2&#xff09; 数据类型的本质&…...

Windows用户界面中的“睫毛膏“

Windows操作系统的用户界面的”外观”&#xff0c;实际上&#xff0c;也经历过一段时尚周期。 起初&#xff0c;还是在Windows 1.0的时代&#xff0c;用户界面是非常扁平的&#xff0c;因为那个时候屏幕分辨率十分低&#xff0c;而色彩深度几乎还不存在。如果你的系统是16色的…...

转载 | 各种数据库JDBC下载

原文链接点击打开链接各种数据库驱动数据库名称下载地址说明Mysqlhttp://www.mysql.com/products/connector/j/Shipped. But need to download the latest for MySQL 4.1 or higher.Oraclehttp://sourceforge.net/project/showfiles.php?group_id33291software/tech/java/sqlj…...

洛谷P1449 后缀表达式进阶解法

#include<iostream> #include<stack> #include<string>using namespace std;stack <int> expr; string temp; char ch; int first, second;int main() {for (;;){cin >> ch;switch (ch){case(.):expr.push(stoi(temp));temp "";brea...

RobotFramework-RIDE简单使用

RobotFramework-RIDE简单使用 准备工作 环境准备&#xff08;Python 3.7.5&#xff0c;robotframework 4.1&#xff0c;robotframework-ride1.7.4.2&#xff09; 1&#xff09;pip install robotframework-ride&#xff08;根据本机Python和RobotFramework安装适配版本&#…...

Python 使用标准库原始socket 生成 pcap 文件

注意事项 : 1.仅限linux/uninx 使用 2.不需要任何第三方库,仅用标准库 3.格式为公开格式,可以whireshark 直接打开 代码如下: import time,structclass Pcap:def __init__(self, filename, link_type1):self.pcap_file open(filename, wb)self.pcap_file.write(struct.pack(…...

堆排序习题

写出下列关键字序列排序的结果&#xff1a;{15&#xff0c;21&#xff0c;6&#xff0c;30&#xff0c;23&#xff0c;6&#xff0c;20&#xff0c;17} 步骤&#xff1a;先对序列进行堆排队&#xff0c;之后将顶部元素与最后一个元素相交换&#xff0c;交换时候重新对剩下的再…...

Seurat学习:如何将自定义的聚类标签添加到Seurat对象当中

假如要添加k-means聚类标签&#xff1a; objectmeta.data$k.means.clusters <- k.means.result 绘制自定义标签的UMAP图&#xff1a; DimPlot(object , reduction‘umap’,group.by “k.means.clusters”) 同时显示自定义标签和UMAP图和Seurat中louvain聚类的UMAP图 plot…...

什么是状态模式

...

Cy5 Methyltetrazine,花青素Cy5 甲基四嗪,花青素Cy5染料的主要用途

产品名称&#xff1a;Cy5 Methyltetrazine 分子量&#xff1a;934.10 主要用途&#xff1a;甲基四嗪-活化的Cy5染料&#xff0c;它与含tco的化合物发生反应&#xff0c;通过一种反电子按需的介子反应&#xff0c;形成稳定的共价键&#xff0c;不需要铜催化剂或高温。TCO与四嗪…...

MySQL分区表原理详解

分区表是将大表的数据分成称为分区的许多小的子集&#xff0c;分区是将一个表的数据按照某种方式&#xff0c;比如按照时间上的月份&#xff0c;分成多个较小的&#xff0c;更容易管理的部分&#xff0c;但是逻辑上仍是一个表。由于在MySQL数据库中&#xff0c;我们对MySQL分区…...

android - FlutterActivity MethodChannel和FlutterView

android - FlutterActivity MethodChannel和FlutterView 因此&#xff0c;大约4个月前&#xff0c;我编写了Flutter应用程序。现在&#xff0c;我想做一个小小的更改&#xff0c;但是我不能再编译应用程序了&#xff0c;因为GeneratedPluginRegistrant.registerWith(this)不再…...

PCB设计中电流与线宽的关系

原文链接&#xff08;点击原文链接更多精彩学习文章和学习内容&#xff09;&#xff1a;http://blog.bools.cn/archives/1262 PCB设计中电流与线宽的关系一、PCB设计铜铂厚度、线宽和电流关系二、PCB电流与线宽三、从图像中确定线宽四、 经验公式五、在PCB设计中线宽选择的经验…...

移动端开发那些事

1px解决方案 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno&qu…...

HTML(菜鸡视角)

heading <h> 标题 </h> 多级标题时&#xff1a;<h1> <h2>......级联 Paragraph <p> 段落内容 </p> Note&#xff01; <!-- 注释内容 --> Element <main> 主要内容 </main> image <img src&quo…...

Hibernate对实际数据进行操作

//增 public static void main(String[] args){ Configuration cfg null; SessionFactory sf null; Session session null; Transaction ts null; User u new User(); System.out.println("请输入用户信息:&quo…...

GCC的-Wl,--wrap编译选项

GCC的--wrap是一个链接器选项&#xff0c;假如我们要编译的源文件为main.c&#xff0c;编译命令如下&#xff1a; gcc main.c -Wl,--wrapfunc -o main.elf有以下效果&#xff1a; 如果符号func没有&#xff08;在当前源文件&#xff09;定义&#xff0c;就链接到__wrap_func如…...

个人技能点(郎)

个人技能点1. 熟悉 h5 和 c3 新特性&#xff1a;语义化标签&#xff0c;flex 布局&#xff0c;动画等H5 新特性&#xff1a;2. 熟悉js作用域、原型、事件轮询机制、闭包等原理&#xff1b;js 作用域闭包事件轮询机制原型3. 熟悉 ES6 语法标准 promise&#xff0c;async/await 异…...

【Android 11】使用Android Studio调试系统应用五):编译Settings 模块、解决编译错误

文章目录 1. 篇头语2. 系列文章3. 关联Git4. 完善Settings的依赖4. 1 Android.bp回顾4.2 提取出所需androndx支持库4.2.1 依赖列表(android.bp)4.2.2 转换后的列表(build.gradle)4.2 提取出所需aar库4.3 提取出依赖的本地jar包4.3.1 查找本地jar包的位置4.3.2 所需jar列表(ando…...

linux work工作队列

linux work工作队列 1.工作队列的介绍 工作队列常用来在特定的时间间隔或者其他情况来执行一些动作&#xff0c;每个工作队列都有一个或者多个的线程&#xff08;通常来说都是一个线程&#xff09;&#xff0c;在每个 线程中执行相应的任务。 2.工作队列的使用 1.work的相…...

[DebugJournal]bat批处理文件遇到的问题及解决方法

问题1&#xff1a;在运行bat文件时&#xff0c;for循环内部的变量无法用echo打印&#xff0c;总是显示回显状态或者将echo后面的内容当作字符输出。 代码及双击bat运行结果如下&#xff1a; 注意&#xff1a;命令行和bat的循环变量写法有差异&#xff0c;命令行循环变量为%i&a…...

vue import错误Module build failed: Error: No PostCSS Config found in解决办法

问题描述&#xff1a; 我是在VUE框架是用import ‘ant-design-vue/dist/antd.css’;引入ant-design-vue的css遇到的&#xff0c;试过很多方法都解决不了&#xff0c;最后解决办法是&#xff1a; 把ant-design-vue直接在vue项目的根目录安装解决问题。...

3D点云系列(一)点云介绍

点云数据简介 点云数据&#xff08;point cloud data&#xff09;是指在一个三维坐标系统中的一组向量的集合。扫描资料以点的形式记录&#xff0c;每一个点包含有三维坐标&#xff0c;有些可能含有颜色信息&#xff08;RGB&#xff09;或反射强度信息&#xff08;Intensity&a…...

初学java可能会遇到的问题

每个单词的大小写不能出现问题&#xff0c; java对大小写十分敏感&#xff1b; 尽量使用英文单词&#xff1b; 文件名和包含main方法的类名必须保持一致&#xff0c;并且首字母大写&#xff1b; 语法的标点符号必须使用英文的。...

【LeetCode刷题日记01】Two Sum

一、题目 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return th…...

数据结构 study 5: typedef 结构体 数组 作为形参

代码 /* c1.h (程序名) */ #include<string.h> #include<ctype.h> #include<malloc.h> /* malloc()等 */ #include<limits.h> /* INT_MAX等 */ #include<stdio.h> /* EOF(^Z或F6),NULL */ #include<stdlib.h> /* atoi() */ #include <…...

毕设系列之 -- 教程:单片机接入按键控制遥感

文章目录1 简介2 主要器件2.1 双轴摇杆模块2.2 电路原理图3 实现效果4 测试代码6 最后1 简介 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天向大家介绍如何使用单片机接入按键遥感 单片机接入按键控制遥感 大家可用于 课程设计 或 毕业设计 技术解答 毕…...

golang中slice的扩容机制

文章目录简介结论关于 len & cap关于 cap 扩容简介 slice 是 golang 中的数组切片&#xff0c;可以理解成是一种动态数组&#xff0c;一般通过 make 声明时候&#xff0c;会指定其 len 和 cap。一般我们常常使用 append 函数时候当 len 超过 cap 时候就会进行扩容处理 结…...

Unable to find instance for XXXX

当你的控制台报了这样的错误 这就是请求的后端服务没启动&#xff0c;联系后端启动后端就行。...

基于mysql的电商用户分析

目录 1.项目背景 1.1分析流程 2.使用“人货场”拆解方式建立指标体系 3.确认问题 4.准备工作 4.1数据读取&#xff08;用户行为数据&#xff09; 4.2数据预处理 5.指标体系建设 5.1用户指标体系&#xff08;UV/PV/留存率&#xff09;RFM模型分析 5.1.1 基础指标 5.1.…...

劝你别把开源的数据分析项目写在简历上了!!!

真诚的向大家推荐&#xff0c;《腾讯课堂数据分析师认证课程》&#xff0c;该课程也是腾讯课堂指定认证课程。专为在校学生、0~3年职场新人量身定制&#xff0c;真正体系化、专业化帮大家提升数据分析能力&#xff0c;成为大厂抢手的数据分析人才。10种商业模型面对不同的场景&…...

计算机毕业设计Java订餐系统(源码+系统+mysql数据库+lw文档)

计算机毕业设计Java订餐系统(源码系统mysql数据库lw文档) 计算机毕业设计Java订餐系统(源码系统mysql数据库lw文档)本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea eclipse 前端技术&#xff1a;Layui、HTM…...

EGE入门基础知识学习篇

文章目录前言一、EGE是什么&#xff1f;二、EGE使用步骤1.基本框架2.创建游戏窗口3.窗口背景颜色篇4.坐标5.文字篇6.音乐篇7.图片篇8.其余篇前言 本文主要是学习EGE的一些基础知识点&#xff0c;方便后面做一些小项目。一、EGE是什么&#xff1f; EGE&#xff0c;全称 Easy G…...

HTML入门学习(一)

HTML入门学习&#xff08;一&#xff09; HTML菜鸟学习第一天 一、HTML语言简介 1、HTML是什么&#xff1f; HTML(HyperTextMarkupLanguage)超文本标记语言&#xff0c;它是通过网页浏览器来阅读实现。其中&#xff0c;“超文本”就是指页面内可以包含图片、链接&#xff0c…...

《焦元溥古典音乐入门指南》学习笔记————第一章 为什么我们还在听古典音乐?

一 . 音乐很难懂吗&#xff1f;那是你听的方式不对。 1.古典音乐不能听了前后一节就忘了前一节&#xff0c;他需要记忆才能够欣赏的来。 就像看书一样&#xff0c;如果想要听大型的音乐作品&#xff0c;一定要有记忆训练。增加音乐记忆。 比如古典音乐中的重复部分&#xf…...

Java零基础入门路径学习

Java零基础入门路径学习 后端开发: 1、2017龙果微服务架构的分布式事务解决方案 2、2017年龙果spring boot 入门实战视频教程-首套中文教程 3、51CTO Spring Boot实战与原理分析视频课程 4、ElasticSearch5视频教程 5、Elasticsearch顶尖高手系列&#xff1a;高手进阶篇&#x…...

elasticSearch学习入门-安装使用

文章目录1. es框架2. es相关术语2.1 相关概念2.2 倒排索引3. es安装部署4. header 插件安装5. es相关api使用5.1 集群api5.2 索引相关5.2.1 创建索引5.2.2 查看索引库5.2.3 创建映射关系5.2.4 删除索引5.3 数据相关5.3.1 添加数据5.3.2 修改数据5.3.3 删除数据5.4 自动创建映射…...

IOS入门学习视频教程

百度网盘&#xff1a;https://pan.baidu.com/s/1Ag2G-Fjyj6PMsTOLXRG0Ig 内容&#xff1a; 第一阶段&#xff1a;语言基础和iOS入门 iOS8 App开发快速入门 iOS开发语言 swift 2.2基础 初始Objective-C 秒学Swift开发语言&#xff0c;坐标系计算机语言学 第二阶段&#xff1…...

AI_学习入门

前言 我是一名传统网页&#xff08;phpruby&#xff09;和应用开发&#xff08;android&#xff09;转型AI相关开发的码农。在非985211高校出身的情况下&#xff0c;我前期自己买书学习&#xff0c;到现在考研上课全身心的投入智能系统的开发当中来&#xff0c;在算法当中理解了…...

MuseScore入门教程(二、添加基本音乐符号)

目录前面教程写在前面添加音符第一种方法第二种方法第三种方法添加音乐术语及其他音乐符号前面教程 MuseScore入门教程&#xff08;一、下载&#xff0c;并新建乐谱&#xff09; 写在前面 上期教程&#xff0c;我们已经了解到MuseScore是个什么样的软件&#xff0c;并已经下…...

esp32入门手册学习

一、开发板资源 HELLO WORLD 串口打印 选编译并下载固件(右箭头) 下载成功后按复位按钮运行程序 生成bin文件&#xff0c;下载固件 用 Arduino IDE 生成一个工程的 bin 文件&#xff0c;然后用 ESPFlashDownloadTool 下载固件。 先点导出 bin 文件 打开 ESPFlashDownl…...

毛里智慧小学宿舍楼工程量清单编制

目 录 摘 要 I 第1章 前言 1 第2章 招标控制价编制 3 2.1招标控制价 3 2.2建设项目招标控制价汇总表 4 2.3单项工程招标控制价汇总表 5 2.4单项工程招标控制价汇总表 14 2.5分部分项工程和单价措施项目清单与计价表 24 2.6总价措施项目清单与计价表 27 2.7综合单价分析表 28 2.…...

HashMap安全嘛? 不安全该怎么办【几种解决方法】【详细】

目录 为什么hashmap不安全解决方法:方案1:使用HashTable(不采用)说明方案2:使用Collections.synchronizedMap(new HashMap<>())(适合低并发小数据量的时候使用)说明:方案3:使用ConcurrentHashMap代替HashMap(适合多线程高并发大数据量的时候使用)说明:为什么…...

STM32 WAVWM8978简介

​ WAV即WAVE文件&#xff0c;是最常用的数字化声音文件格式之一&#xff0c;其扩展名为“.wav”。符合RIFF(Resource Interchange File Format)文件规范&#xff0c;用于保存Windows平台的音频信息资源&#xff0c;被Windows平台及其应用程序所广泛支持。 WAV格式还支持MS ADP…...

STM32——WAVWM8978简介

1、什么是WAV&#xff1f; WAV即WAVE文件&#xff0c;是最常用的数字化声音文件格式之一&#xff0c;其扩展名为“.wav”。符合RIFF&#xff08;Resource Interchange File Format&#xff09;文件规范&#xff0c;用于保存Windows平台的音频信息资源&#xff0c;被Windows平台…...

Java初级面试题之do-while循环

package com.test; /** i5and j6author KingShy */ public class T08 { public static void main(String[] args) {// TODO Auto-generated method stub//int 1alpha,_abcd,xyabc,transient,account-num,very_long_name;/** float f30x1345; float f52001.00; float f542e...

初级java开发 面试题_Java初级工程师面试题大全

一、基础和语法8.变量的属性覆盖问题&#xff1f;我们来看看这么一道题&#xff1a;class ParentClass {public int i 10;}public class SubClass extends ParentClass {public int i 30;public static void main(String[] args) {ParentClass parentClass new SubClass();S…...

java面试题——SpringBoot

什么是SpringBoot&#xff1f; SpringBoot是Spring开源组织下的子项目。是搭建Spring应用的脚手架&#xff0c;主要简化了使用Spring的难度&#xff0c;俭省了xml的配置&#xff0c;提供了各种启动器在运行过程中自动配置&#xff0c;可以快速的上手。 SpringBoot的优点&#…...

Java初级面试题!!自己出几道面试题,感觉很有意思

准备面试&#xff0c;看资料发现一些知识点很有意思&#xff0c;所以自己写几个面试题&#xff0c;以后好坑人&#xff01;&#xff01; 1.构造器里可以调用构造器吗&#xff1f;需要注意什么&#xff1f; 只能调用一个构造器&#xff0c;而且必须处于最起始位置。除了构造器外…...