js滚动到对应元素scrollIntoView
发表于|更新于
|浏览量:
娇柔做作,失去真实的不是美,充满了富贵荣华的名利思想,也不是真美。——孟德斯鸠
文档:
Element.scrollIntoView() - Web API | MDN
用法:
1 | scrollIntoView() |
例如我选中某个元素执行
1 | const element = document.getElementById("box"); |
相关推荐
2022-03-18
判断浏览器窗口滚动到最底部
任何人都应该有自尊心自信心独立性,不然就是奴才。但自尊不是轻人,自信不是自满,独立不是弧立。——徐特立 首先是昨天我们说的vue中绑定@scroll事件,别忘了加对应的高度,以及检查overflow-y: 123<div @scroll="onScroll" class="allow-scroll"> 我是很高很长很长(超过外部div高度)的内容...</div> 然后是滚动事件处理: 12345678onScroll(e) { // Y轴滚动距离 偏移高度 总高度 let { scrollTop, clientHeight, scrollHeight } = e.target console.log(`scrollTop + clientHeight ${scrollTop + clientHeight} >= scrollHeight-1 ${scrollHeight - 1}`) if (scrollTop + cl...
2025-05-03
hoppscotch
往往有这样的情形:为科学和技术开拓新道路的,有时并不是科学界的著名人物,而是科学界毫不知名的人物,平凡的人物,实践家,工作革新者。 —— 斯大林 https://github.com/hoppscotch/hoppscotch/ https://hoppscotch.io/ Hoppscotch:开源 API 开发生态系统在现代 Web 开发中,API 是核心组件之一,开发者需要一套高效、可靠的工具来测试和开发 API。Hoppscotch 是一个开源的 API 开发生态系统,提供了强大且简洁的功能,作为 Postman 和 Insomnia 的开源替代品,正在受到越来越多开发者的青睐。 什么是 Hoppscotch?Hoppscotch 是一个轻量级且功能丰富的 API 客户端,专为开发者设计。它支持 HTTP 请求测试、GraphQL 查询、WebSocket 调试等功能,同时提供了现代化的用户界面和高效的工作流,帮助开发者快速完成 API 的开发和测试。 核心特点: 跨平台支持:Hoppscotch 是一个 Progressive Web App (PWA),可在浏览...
2024-01-15
纯css实现炫酷头像效果
官僚作风是一门使可能变成不可能的艺术。——萨尔塞多 分享一个炫酷头像效果: 从b站渡一教育的一个视频看到的(不是推广,只是注明出处) 123456789101112131415161718192021222324252627282930313233343536373839<style> img { --s: 280px; --c1: #c02942; --c2: #ecd078; --b: 5px; --f: 1; --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%; --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b)); width: var(--s); height: var(--s); cursor: pointer; transition: 0.5s; padding-top: 100px; outline: ...
2024-01-14
chakra-ui
对人生命最大的威胁是以车代步,而不是交通事故。——怀特 分享一个很好看的react的UI组件库chakra-ui: https://chakra-ui.com/ https://github.com/chakra-ui/chakra-ui
2024-05-19
js解析JWT
懂得生命真谛的人,可以使短促的生命延长。——西塞罗 代码如下: 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 当我在解析 jwt 的 token 时,发现 token 中附带的用户 id 存在精度丢失问题,然后用正则改进解析 JWT 的代码: 1const tokenParse = token => token.split(".").slice(0, 2).map(i => JSON.parse(atob(i).replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => Math.abs(p1) > Number.MAX_SAFE_INTEGER ? `:"${p1}"` : `:${p1}`))); 但是还存在 base64 解码时无法正确解码中文问题,继续改进 1const tok...
2021-10-06
uniCloud查询数据库
江流宛转绕芳甸,月照花林皆似霰。——张若虚 首先先右键项目中的database目录,没有的话自己手动创建一个,选择新建DB Schema 输入表名,点击创建 将read改为true 点击上传DB Schema 点击是 我们刷新云控制台可以看到成功上传 我们添加两条记录 1234{ "name": "ruben", "phone": "13888888888"} 点击确定 新建一个list页面 写入代码: 12345678910111213141516171819<template> <view> <unicloud-db v-slot:default="{ data, loading, error, options }" collection="contacts"> <view v-if="error">...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog