Bootstrap4组件:滚动监听(Scrollspy) 点击发生的时候,调到页面的对应内容


发布时间:2020-03-20 16:36    作者: Uncle Hui   已过去:8 月,2 周   阅读总量:521 已被赞:0


滚动监听(Scrollspy) 点击发生的时候,调到页面的对应内容

Scrollspy滑动监控组件正常运行的几个要点:

  1. 如果从源代码构建JS,请 包括 util.js。
  2. 它必须在Bootstrap nav 导航组年 或 list group列表组上使用。
  3. Scrollspy 需要在你监控的元素上使用 position: relative; ,通常是 <body>。
  4. 当需要对 <body>以外的元素进行监控时,请确保具有 height 高度值和 overflow-y: scroll; 属性。
  5. 锚点 (<a>)是必须的,并且必须指向一个id上。

实施成功后,你的导航或列表群组将相应地更新,根据 .active 关联的目标,从一个项目移到另一个项目。

通过数据属性:要轻松添加滚动行为到您的顶栏导航,添加 data-spy="scroll"到您要窥探的元素(通常是<body>)。然后添加data-target属性到任何Bootstrap .nav组件的父元素ID或类的Class属性。

滚动监听(Scrollspy)navbar导航中的示例

<nav class="navbar navbar-light bg-light">

<a href="" class="navbar-brand">前端</a>

<ul class="nav nav-pills">

<li class="nav-item">

<a href="#h5" class="nav-link">@HTML5</a>

</li>

<li class="nav-item">

<a href="#c3" class="nav-link">@CSS3</a>

</li>

<li class="nav-item dropdown">

<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">JavaScript</a>

<div class="dropdown-menu">

<a href="#vue" class="dropdown-item">Vue.js</a>

<a href="#react" class="dropdown-item">React.js</a>

</div>

</li>

</ul>

</nav>

<div style="position:relative;height:200px;overflow-y:scroll;" data-spy="scroll">

<h4 id="h5">HTML5</h4>

<p>

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

<br>

HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。

<br>

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

</p>

<p>

2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”

<br>

2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。

<br>

本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。

</p>

 

<h4 id="c3">CSS3</h4>

<p>

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

</p>

<p>

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂。

</p>

 

<h4 id="vue">Vue.js</h4>

<p>

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

</p>

<p>

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。<br>

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

</p>

 

<h4 id="react">React.js</h4>

<p>

由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

</p>

<p>

这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。

</p>

<p>

React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

</p>

</div>

滚动监听(Scrollspy)嵌套的导航示例 列表样式

<div class="row">

    <div class="col-3">

        <nav class="navbar navbar-light bg-light flex-column">

            <a href="" class="navbar-brand">网战天下</a>

            <nav class="nav nav-pills flex-column">

                <a href="#item-1" class="nav-link">Item 1</a>

                <nav class="nav nav-pills flex-column">

                    <a href="#item-1-1" class="nav-link ml-3 my-1">Item 1-1</a>

                    <a href="#item-1-2" class="nav-link ml-3 my-1">Item 1-2</a>

                </nav>

 

                <a href="#item-2" class="nav-link">Item 2</a>

 

                <a href="#item-3" class="nav-link">Item 3</a>

                <nav class="nav nav-pills flex-column">

                    <a href="#item-3-1" class="nav-link ml-3 my-1">Item 3-1</a>

                    <a href="#item-3-2" class="nav-link ml-3 my-1">Item 3-2</a>

                </nav>

            </nav>

        </nav>

    </div>

    <div class="col-9">

        <div style="position:relative;height:350px;overflow-y:scroll;" data-spy="scroll">

            <h4 id="item-1">Item 1</h4>

            <p>

                Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>

            </p>

            <h5 id="item-1-1">Item 1-1</h5>

            <p>

                Item 1-1<br>Item 1-1<br>Item 1-1<br>Item 1-1<br>Item 1-1<br>Item 1-1<br>Item 1-1<br>Item 1-1<br>Item

                1-1<br>Item 1-1<br>

            </p>

            <h5 id="item-1-2">Item 1-2</h5>

            <p>

                Item 1-2<br>Item 1-2<br>Item 1-2<br>Item 1-2<br>Item 1-2<br>Item 1-2<br>Item 1-2<br>Item 1-2<br>Item

                1-2<br>Item 1-2<br>

            </p>

 

            <h4 id="item-2">Item 2</h4>

            <p>

                Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item

                2<br>Item 2<br>

            </p>

 

            <h4 id="item-3">Item 3</h4>

            <p>

                Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item

                3<br>Item 3<br>

            </p>

            <h5 id="item-3-1">Item 3-1</h5>

            <p>

                Item 3-1<br>Item 3-1<br>Item 3-1<br>Item 3-1<br>Item 3-1<br>Item 3-1<br>Item 3-1<br>Item

                3-1<br>Item 3-1<br>Item 3-1<br>

            </p>

            <h5 id="item-3-2">Item 3-2</h5>

            <p>

                Item 3-2<br>Item 3-2<br>Item 3-2<br>Item 3-2<br>Item 3-2<br>Item 3-2<br>Item 3-2<br>Item

                3-2<br>Item 3-2<br>Item 3-2<br>

            </p>

        </div>

    </div>

</div>

滚动监听(Scrollspy)列表组示例

<div class="row">

<div class="col-3">

<div class="list-group">

<a href="#item-1" class="list-group-item list-group-item-action">Item 1</a>

<a href="#item-2" class="list-group-item list-group-item-action">Item 2</a>

<a href="#item-3" class="list-group-item list-group-item-action">Item 3</a>

</div>

</div>

<div class="col-9">

<div style="position:relative;height:350px;overflow-y:scroll;" data-spy="scroll">

<h4 id="item-1">Item 1</h4>

<p>

Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>Item 1<br>

</p>

 

<h4 id="item-2">Item 2</h4>

<p>

Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>Item 2<br>

</p>

 

<h4 id="item-3">Item 3</h4>

<p>

Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>Item 3<br>

</p>

</div>

</div>

</div>

滚动监听(Scrollspy)JavaScript 行为

选项

名称

Type类型

默认值

描述

offset

number

10

计算滚动位置时,从顶部开始的计算的像偏移距离。

当内容马上要滚动到顶部距离10个像素的时候,就跳转,高亮

事件

Event事件类型

描述

activate.bs.scrollspy

每当新项目被滚动激活时,该事件就会在滚动元素上触发。执行这个事件,就是触发一个动作

 

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {

// do something…

比如弹出一个框

})

 

点赞

0




登陆后方可评论