登录注册

前端技术文章

分类:
作为锚点。JavaScript 也可用于平滑滚动效果。代码示例：返回顶部
CSS（可选平滑">
作为锚点。JavaScript 也可用于平滑滚动效果。代码示例：返回顶部
CSS（可选平滑">点击按钮返回顶部，可通过设置锚点实现。使用 标签并绑定 href="#top"，在页面顶部设置
作为锚点。JavaScript 也可用于平滑滚动效果。代码示例：返回顶部
CSS（可选平滑
最轻量兼容方案是<ahref="#top">配合<divid="top">，但固定导航栏会遮挡内容；需用scroll-padding-top或margin-top/padding-top负正抵消法预留偏移，或JS调用scrollTo({top:0,behavior:'smooth'})并减去导航栏高度。
文章 · 前端   |  1个月前  |   html 401浏览 收藏
  • CSS控制滚动条在padding外显示的技巧
    CSS控制滚动条在padding外显示的技巧
    overflow必须设置在有明确尺寸限制且内容溢出的内层盒子上才有效；外层盒子仅负责padding等留白，不设overflow，内层设height/max-height与overflow-y:auto。
    文章 · 前端   |  1个月前  |   176浏览 收藏
  • navigator.onLine 监听网络变化并触发同步
    navigator.onLine 监听网络变化并触发同步
    navigator.onLine仅提供当前网络状态快照，不能直接触发同步；正确做法是offline事件暂存任务到本地存储，online事件或页面加载时主动执行幂等同步，并需防范假在线、时效性等实际问题。
    文章 · 前端   |  1个月前  |   499浏览 收藏
  • aria-pressed的正确用法及实战示例
    aria-pressed的正确用法及实战示例
    aria-pressed用于标识按钮的“按下”状态，适用于切换行为的按钮。1.它不是描述按钮是否可点击，而是反映其当前状态，如静音或播放/暂停按钮；2.可用在原生<button>或带role="button"的元素上；3.其值为true、false或mixed，需通过JavaScript动态更新以匹配视觉状态；4.与aria-checked（复选框状态）和aria-selected（集合中选中项）不同，分别应用于不同语义场景；5.动态更新至关重要，确保屏幕阅读器能实时反馈状
    文章 · 前端   |  1个月前  |   341浏览 收藏
  • CSS单侧边框设置方法详解
    CSS单侧边框设置方法详解
    border-left没生效主要因三点：未设border-style、父容器overflow:hidden裁剪或元素为inline需改display；Retina屏模糊需用0.5px或transform缩放；flex中推荐gap+border-right替代以避免宽度计算错误。
    文章 · 前端   |  1个月前  |   316浏览 收藏
  • V8 隐藏类优化对象访问速度技巧
    V8 隐藏类优化对象访问速度技巧
    HiddenClasses是V8为相同属性结构对象动态生成的内部类型描述，决定属性访问是否启用内联缓存；结构不稳定（如delete、乱序添加、类型变更）会触发字典模式，性能降2–5倍。
    文章 · 前端   |  1个月前  |   100浏览 收藏
  • 在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSig
    在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSig
    CSS中没有rem()函数，因为rem是长度单位而非计算函数；真正支持数值计算的只有calc()、min()、max()、clamp()，且均不支持取余运算。
    文章 · 前端   |  1个月前  |   408浏览 收藏
  • CSS Grid快速构建Tab选项卡组件方法
    CSS Grid快速构建Tab选项卡组件方法
    不能直接用grid-template-rows切换Tab内容，因其仅定义轨道而非控制显隐；应由display/visibility/inert等机制配合Grid布局实现，结构上用tab-container+tab-content分离布局与状态。
    文章 · 前端   |  1个月前  |   276浏览 收藏
  • CSS @import 引入组件样式出现延迟，主要是因为 @import 会阻塞页面渲染，导致加载变慢。解决方法包括： 1. **避免使用 @import**：直接使用 `` 标签引入 CSS 文件，性能更优。 2. **将 @import 放在底部**：尽量将 @import 放在 CSS 文件的末尾，减少对关键渲染路径的影响。 3. **使用异步加载**：通过 JavaScript 动态加载
    CSS @import 引入组件样式出现延迟，主要是因为 @import 会阻塞页面渲染，导致加载变慢。解决方法包括： 1. **避免使用 @import**：直接使用 `` 标签引入 CSS 文件，性能更优。 2. **将 @import 放在底部**：尽量将 @import 放在 CSS 文件的末尾，减少对关键渲染路径的影响。 3. **使用异步加载**：通过 JavaScript 动态加载
    根本原因是@import会阻塞后续CSS解析与渲染，属CSS规范定义的同步行为；应改用构建工具模块化引入或link并行加载。
    文章 · 前端   |  1个月前  |   285浏览 收藏
  • WebSocket消息撤回与实时列表更新教程
    WebSocket消息撤回与实时列表更新教程
    消息撤回需服务端广播message_recall类型状态变更并写入日志，前端通过msgId精准更新UI，离线用户需兜底同步，确保跨终端状态一致。
    文章 · 前端   |  1个月前  |   433浏览 收藏
  • HTML左侧抽屉弹出实现方法【代码详解】
    HTML左侧抽屉弹出实现方法【代码详解】
    最简方案是用transform:translateX(-280px)和translateX(0)配合transition实现drawer弹出，需设固定宽度、position:fixed、bodyoverflow:hidden，并通过class切换控制状态，避免直接操作style。
    文章 · 前端   |  1个月前  |   417浏览 收藏
  • JavaScript 动态控制元素可见性及响应式适配方法
    JavaScript 动态控制元素可见性及响应式适配方法
    本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与CSS类控制，而非直接操作style.display。本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与CSS类控制，而非直接操作`style.display`。在构建响应式导航菜单时，常见的需求是：大屏下默认显示全部内容，小屏下默认折叠、点击标题展
    文章 · 前端   |  1个月前  |   384浏览 收藏
  • 优雅降级新标签 noscript 与 polyfill 方法
    优雅降级新标签 noscript 与 polyfill 方法
    <noscript>对新HTML标签无效，因其仅响应JS禁用而非浏览器不支持；应使用特性检测（如typeofHTMLDialogElement）配合动态降级或轻量polyfill。
    文章 · 前端   |  1个月前  |   397浏览 收藏
  • 数组 push() 与 unshift() 性能对比分析
    数组 push() 与 unshift() 性能对比分析
    unshift()时间复杂度为O(n)，数组越长性能越差；push()为O(1)，始终高效。5万元素下unshift100次超300ms，push同量仅<0.5ms，差距百倍起跳。
    文章 · 前端   |  1个月前  |   209浏览 收藏
    • 1979899500
    扫码关注公众号获取更多Go知识
    查看更多
    课程推荐
    查看更多
    AI推荐
    关于我们 免责声明 意见反馈 联系我们 内容提交 手册
    Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
    技术交流群
    Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
    • Golang学习网
      关注公众号
      Golang学习网
    微信登录更方便
    • 密码登录
    • 注册账号
    忘记密码
    登录即同意 用户协议 和 隐私政策
    返回登录
    • 重置密码
    发送验证码