js - 通过锚点实现导航联动内容，通过监听容器里的滚动条，实现内容联动导航

最新推荐文章于 2023-07-11 14:45:52 发布

yumihe

最新推荐文章于 2023-07-11 14:45:52 发布

阅读量2.4k

点赞数 1

分类专栏： js vue 文章标签： js 导航与内容联动

本文链接：https://blog.csdn.net/qq_32678401/article/details/99644034

版权

写这篇文章的背景：

接手的项目中有一个页面，通过锚点实现了导航联动内容，但是没有实现内容滚动时联动导航

于是我在项目中实现这一功能之前，在本地模拟了相同的场景

以下代码可以直接复制到本地查看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航与页面滚动的联动</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
    *{margin: 0;padding: 0;}
    html,body{height: 100%;overflow: hidden;}
    ul{list-style: none;}
    a{text-decoration: none;color: #666;}
    .clearfix:after{content: '';clear: both;display: block;}
    .container{width: 1000px;margin: 0 auto;height: 100%}
    .list li{width: 100px;height: 80px;line-height: 80px;float: left;}
    .active a{color: #f00;}
    .wrap{height: 300px;overflow-y: scroll;border: 1px solid #ccc;}
  </style>
</head>
<body>
  <div id="contain

最低0.47元/天解锁文章

yumihe

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js - 通过锚点实现导航联动内容，通过监听容器里的滚动条，实现内容联动导航

写这篇文章的背景：接手的项目中有一个页面，通过锚点实现了导航联动内容，但是没有实现内容滚动时联动导航于是我在项目中实现这一功能之前，在本地模拟了相同的场景以下代码可以直接复制到本地查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫