scrollintoview方法滚动距离顶部距离

scrollIntoView 方法是 DOM API 的一部分,用于将元素滚动到视图中。这个方法接收一个布尔值参数 alignToTop,指示是否需要滚动到视图的顶部。

以下是如何使用 scrollIntoView 方法的示例代码:

// 获取需要滚动的元素
const element = document.getElementById('some-element-id');// 滚动到视图中,如果元素高度超过视口,则滚动到视图顶部
element.scrollIntoView(true);// 或者使用简写形式,效果相同
element.scrollIntoView();// 如果你想使用动画滚动效果,可以使用 smooth 选项
element.scrollIntoView({ behavior: 'smooth', block: 'start' });// 如果你想要平滑的滚动效果并且确保元素滚动到视图顶部
element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });

 以下是一个示例:

<template><div class="content"><div class="box1 box"></div><div class="box2 box"></div><div class="box3"><div class="son"><ul><li @click="btn(0)">TabA</li><li @click="btn(1)">TabB</li></ul><div class="bg" :class="transbg ? 'transbg' : ''"></div></div><div class="son-ul"><div class="son-li" v-for="index in 50">{{ index }}{{ index }}{{ index }}{{ index }}{{ index }}</div></div></div></div>
</template><script setup lang="ts">
import { ref } from 'vue'const transbg = ref<any>(false)const btn = (val:any)=>{const contentDom:any = document.querySelector('.son');contentDom.scrollIntoView({ behavior: 'smooth', block: 'start' });//startif(val == 1){transbg.value = true} else {transbg.value = false}
}
</script><style scoped lang="less">
.content{width: 100vw;height: 100vh;background-color: aliceblue;overflow-y: scroll;.box{width: 100%;height: 150px;}.box1{background-color: aquamarine;}.box2{background-color: skyblue;}.box3{.son{width: 100%;height: 60px;background-color: pink;position: sticky;top: 0px;display: flex;justify-content: center;align-items: center;ul{width: 70%;height: 50px;background-color: azure;border-radius: 25px;list-style-type: none;display: flex;justify-content: center;align-items: center;position: relative;li{flex: 1;line-height: 30px;text-align: center;height: 35px;z-index: 10;}}.bg{position: absolute;left:18%;width: 28%;height: 40px;background-color: rgb(176, 105, 17);border-radius: 20px;transition: all .5s;}.transbg{left: 54%;}}.son-ul{scroll-behavior: smooth;width: 100%;.son-li{height: 20px;background-color: blanchedalmond;margin-top: 10px;}}}
}
</style>

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

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

相关文章

GA-PEG-GA,Glutaric Acid-PEG-Glutaric Acid可修饰蛋白质、肽和其他材料

【试剂详情】 英文名称 GA-PEG-GA&#xff0c;Glutaric Acid-PEG-Glutaric Acid 中文名称 戊二酸-聚乙二醇-戊二酸&#xff0c;戊二酸PEG戊二酸 外观性状 由分子量决定&#xff0c;液体或者固体 分子量 0.4k&#xff0c;0.6k&#xff0c;1k&#xff0c;2k&#xff0c;3.…

Springboot+Vue项目-基于Java+MySQL的校园疫情防控系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

电脑技巧:推荐一款非常好用的媒体播放器PotPlayer

目录 一、 软件简介 二、功能介绍 2.1 格式兼容性强 2.2 高清播放与硬件加速 2.3 自定义皮肤与界面布局 2.4 多音轨切换与音效增强 2.5 字幕支持与编辑 2.6 视频截图与录像 2.7 网络流媒体播放 三、软件特色 四、使用技巧 五、总结 一、 软件简介 PotPlayer播放器 …

力扣33. 搜索旋转排序数组

Problem: 33. 搜索旋转排序数组 文章目录 题目描述思路复杂度Code 题目描述 思路 1.初始化左右指针&#xff1a;首先&#xff0c;定义两个指针left和right&#xff0c;分别指向数组的开始和结束位置。 2.计算中间值&#xff1a;在left和right之间找到中间位置mid。 3.比较中间值…

selenium 4.x 入门(环境搭建、八大元素定位)

背景 Web自动化测现状 1. 属于 E2E 测试 2. 过去通过点点点 3. 好的测试&#xff0c;还需要记录、调试网页的细节 一、selenium4.x环境搭建 一键搭建 pip3 install webdriver-helper 安装后自动的完成&#xff1a; 1. 查看浏览器的版本号 2. 查询操作系统的类型…

Bert基础(二十)--Bert实战:机器阅读理解任务

一、机器阅读理解任务 1.1 概念理解 机器阅读理解&#xff08;Machine Reading Comprehension, MRC&#xff09;就是给定一篇文章&#xff0c;以及基于文章的一个问题&#xff0c;让机器在阅读文章后对问题进行作答。 在机器阅读理解领域&#xff0c;模型的核心能力体现在对…

数字文旅重塑旅游发展新生态:以数字化转型为契机,推动旅游产业的创新发展,提升旅游服务的智能化、网络化和个性化水平

目录 一、引言 二、数字化转型推动旅游产业创新发展 1、数字化转型提升旅游产业效率 2、数字化转型拓展旅游产业边界 3、数字化转型促进旅游产业可持续发展 三、提升旅游服务智能化、网络化和个性化水平 1、智能化提升旅游服务体验 2、网络化拓宽旅游服务渠道 3、个性…

微服务之分布式理论zookeeper概述

一、分布式技术相关的理论 CAP理论 CAP定理(CAP theorem)&#xff0c;⼜被称作布鲁尔定理(Eric Brewer)&#xff0c;1998年第⼀次提出. 最初提出是指分布式数据存储不可能同时提供以下三种保证中的两种以上: (1) ⼀致性(Consistency): 每次读取收到的信息都是最新的; (2) …

Pandas数据可视化 - Matplotlib、Seaborn、Pandas Plot、Plotly

可视化工具介绍 让我们一起探讨Matplotlib、Seaborn、Pandas Plot和Plotly这四个数据可视化库的优缺点以及各自的适用场景。这有助于你根据不同的需求选择合适的工具。 1. Matplotlib 优点: 功能强大&#xff1a;几乎可以用于绘制任何静态、动画和交互式图表。高度可定制&a…

网络安全之密码学技术

文章目录 网络信息安全的概念数据加密|解密概念密码学概论密码学分类古典密码学现代密码学 现代密码学的相关概念对称加密算法对称加密算法—DES对称加密算法—3DES对称加密算法—AES对称加密算法—IDEA 非对称加密算法非对称加密算法—RSA非对称加密算法—ElGamal非对称加密算…

Netty: NIO网络编程

文章目录 一、NIO介绍二、NIO原理三、Buffer1、Buffer原理介绍2、Buffer实现类3、示例4、NIO和BIO的比较 四、Channel1、介绍2、FileChannel介绍3、Buffer和Channel的注意事项 五、Selector六、Selector、Channel和Buffer关系 一、NIO介绍 NIO介绍 二、NIO原理 NIO有三大核心…

Axure如何调起浏览器的打印功能

Axure如何调起浏览器的打印功能 答&#xff1a;javascript:window.print(); 不明白的继续往下看 应用场景&#xff1a; 原型设计中&#xff0c;页面上的打印按钮&#xff0c;需要模拟操作演示&#xff0c;需要点击指定的按钮时&#xff0c;唤起浏览器的打印功能&#xff08…

Three.js杂记(十五)—— 汽车展览(下)

在上一篇文章Three.js杂记&#xff08;十四&#xff09;—— 汽车展览上 - 掘金 (juejin.cn)中主要对切换相机不同位置和鼠标拖拽移动相机焦点做了简单的应用。 那么现在聊聊该如何实现汽车模型自带的三种动画展示了&#xff0c;实际上可以是两种汽车前后盖打开和汽车4车门打开…

B端界面:美不胜收,第一弹12张。

每期分享12张漂亮的B端界面&#xff0c;本次分享第一期&#xff0c;欢迎大家来捧场。 若有收获&#xff0c;就点个赞吧

二维码门楼牌管理应用平台建设:强化网格巡查,提升城市管理效率

文章目录 前言一、二维码门楼牌管理应用平台的兴起背景二、网格巡查与二维码门楼牌管理的融合三、二维码门楼牌管理应用平台对网格巡查的提升作用四、二维码门楼牌管理应用平台面临的挑战与未来发展五、结语 前言 随着城市化进程的加速&#xff0c;城市管理工作面临着前所未有…

每天五分钟玩转深度学习PyTorch:创建pytorch中的零维标量tensor

标量是什么? tensor张量是一个多维数组,零维就是一个点(就是本章的标量),一维就是向量,二维就是一般的矩阵,多维就相当于一个多维的数组,这和 numpy理解是一样的,不同的是Tensor不仅可以在CPU上跑,在GPU上也可以跑。 标量(scalar),只具有数值大小,而没有方向,…

国内首个图计算平台团体标准发布,创邻科技参与编撰

2024年&#xff0c;由中国通信标准协会批准的团体标准《大数据 图计算平台技术要求与测试方法》&#xff08;编号&#xff1a;T/CCSA 470—2023&#xff09;&#xff08;下称&#xff1a;标准&#xff09;正式实施。该标准于1月4日在全国团体标准信息平台&#xff08;https://w…

Golang中实现调用Windows API向指定目标发送ARP请求

简介 Go库中很多实现的arp都是支持osx/linux/bsd之类的&#xff0c; 但几乎没有支持windows的&#xff0c; 也试了一些方式&#xff0c; 目前还是选用调用windows的API&#xff0c; 记录一下这一次windows的API的调用经验。 实现 代码 package main/* #cgo CFLAGS: -I. #cgo …

神经网络基础(Neural net foundations)

Today we’ll be learning about the mathematical foundations of deep learning: Stochastic gradient descent (SGD), and the flexibility of linear functions layered with non-linear activation functions. We’ll be focussing particularly on a popular combination…

微信小程序与web-view网页进行通信的尝试

首先&#xff0c;微信小程序向web-view传递数据一般通过地址栏传参的形式&#xff08;给src赋值或者修改hash&#xff09;&#xff0c;这样一般就已经能够满足实际开发需求了&#xff0c;所以这里主要探讨web-view向微信小程序传参。下面&#xff0c;我们从官方文档入手&#x…