小白教程
所有教程
关于
Search
172.71.254.19
172.71.254.19
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 滚动监听”的源代码
本页内容
上一节:
Bootstrap5_弹出框
下一节:
Bootstrap5_侧边栏导航(Offcanvas)
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 滚动监听}}[[Category:Bootstrap 5 教程|27]] = Bootstrap5 滚动监听(Scrollspy) = 滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 == 如何创建滚动监听 == 以下实例演示了如何创建滚动监听: <sample title="" desc="" lang="html" hererun="1"> <!-- 可滚动区域 --> <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <!-- 导航栏 - <a> 元素用于跳到指定滚动区域 --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... <ul class="navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </div> </nav> <div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html> </run> === 实例解析 === 向您想要监听的元素(通常是 body)添加 data-bs-spy="scroll" 。 然后添加 data-bs-target 属性,它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。 注意可滚动项元素上的 id (<div id="section1">) 必须匹配导航栏上的链接选项 (<a href="#section1">)。 可选项data-bs-offset 属性用于计算滚动位置时,距离顶部的偏移像素。 默认为 10 px。 <blockquote>'''设置相对定位:''' 使用 data-spy="scroll" 的元素需要将其 CSS '''position''' 属性设置为 "relative" 才能起作用。 </blockquote> 以下实例设置了垂直滚动监听: <sample title="" desc="" lang="html" hererun="1"> <div class="row"> <div class="col-4"> <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link active" href="#item-3">Item 3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ms-3 my-1 active" href="#item-3-2">Item 3-2</a> </nav> </nav> </nav> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0"> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> <p>...</p> <h5 id="item-1-2">Item 1-2</h5> <p>...</p> <h4 id="item-2">Item 2</h4> <p>...</p> <h4 id="item-3">Item 3</h4> <p>...</p> <h5 id="item-3-1">Item 3-1</h5> <p>...</p> <h5 id="item-3-2">Item 3-2</h5> <p>...</p> </div> </div> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <style> .scrollspy-example-2 { position: relative; height: 350px; overflow: auto; } </style> <body > <div class="row"> <div class="col-4"> <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link active" href="#item-3">Item 3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ms-3 my-1 active" href="#item-3-2">Item 3-2</a> </nav> </nav> </nav> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0"> <h4 id="item-1">Item 1</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-1-1">Item 1-1</h5> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-1-2">Item 1-2</h5> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="item-2">Item 2</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="item-3">Item 3</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-3-1">Item 3-1</h5> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h5 id="item-3-2">Item 3-2</h5> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> </div> </div> </div> </body> </html> </run> == 列表组形式: == <sample title="" desc="" lang="html" hererun="1"> <div id="list-example" class="list-group"> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> </div> <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="list-item-1">Item 1</h4> <p>...</p> <h4 id="list-item-2">Item 2</h4> <p>...</p> <h4 id="list-item-3">Item 3</h4> <p>...</p> <h4 id="list-item-4">Item 4</h4> <p>...</p> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <style> .scrollspy-example { position: relative; height: 200px; margin-top: .5rem; overflow: auto; } </style> <body > <div class="row"> <div class="col-4"> <div id="list-example" class="list-group"> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action active" href="#list-item-4">Item 4</a> </div> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="list-item-1">Item 1</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-2">Item 2</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-3">Item 3</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <h4 id="list-item-4">Item 4</h4> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> </div> </div> </div> </body> </html> </run>
返回至“
Bootstrap5 滚动监听
”。
上一节:
Bootstrap5_弹出框
下一节:
Bootstrap5_侧边栏导航(Offcanvas)