English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Guida di base di Bootstrap

Plugin di Bootstrap

Plugin di ascolto della scorrimento (Scrollspy) di Bootstrap

L'plugin di ascolto della scorrimento (Scrollspy) di Bootstrap, che aggiorna automaticamente il plugin di navigazione, aggiorna automaticamente i punti di navigazione in base alla posizione della barra di scorrimento. La sua implementazione di base aggiunge alla barra di navigazione, man mano che scorri, gli elementi basati sulla posizione della barra di scorrimento. .active class.

Se vuoi utilizzare funzionalità specifiche di questo plugin, devi citare scrollspy.js. O come Panoramica delle plugin di Bootstrap Come menzionato nel capitolo bootstrap.js o la versione compressa bootstrap.min.js.

Uso

Puoi aggiungere un comportamento di ascolto della scorrimento alla navigazione superiore:

  • attraverso data attributeAggiungi l'attributo data al elemento che vuoi monitorare (solitamente il body) data-spy="scroll". E poi aggiungi l'attributo Bootstrap .nav ID o attributo class del genitore del componente data-target. Per garantire che funzioni correttamente, devi assicurarti che ci siano elementi con ID corrispondenti ai link che vuoi monitorare nel corpo della pagina.

    <body data-spy="scroll" data-target=".navbar-example">
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>

  • attraverso JavaScriptPuoi chiamare l'ascolto della scorrimento tramite JavaScript, selezionare l'elemento da monitorare e poi chiamare .scrollspy() Funzione:

    $('body').scrollspy({ target: '.navbar-example' })

Esempio online

Esempio di utilizzo dell'plugin di ascolto della scorrimento (Scrollspy) attraverso l'attributo data:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin di ascolto di scorrimento (Scrollspy)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>　
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"　
	　style="altezza:200px;overflow:auto; posizione: relativa;">
	<h4 id="ios">iOS</h4>
	<p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple　
		iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, mentre iOS è la versione mobile di Apple.
	</p>
	<h4 id="svn">SVN</h4>
	<p>Apache Subversion, spesso abbreviato in SVN, è un software di controllo della versione open-source. Subversion è stato creato dalla CollabNet nel 2000. Ora è un progetto della Apache Software Foundation, quindi possiede una vasta comunità di sviluppatori e utenti.
	</p>
	<h4 id="jmeter">jMeter</h4>
	<p>jMeter è un software di test open-source. È un'applicazione Java 100% pura, utilizzata per test di carico e prestazioni.
	</p>
	<h4 id="ejb">EJB</h4>
	<p>Enterprise Java Beans (EJB) è una架构 per la creazione di applicazioni enterprise a elevata scalabilità e potenti, sviluppate per J2EE e distribuite su server applicativi compatibili (ad esempio JBOSS, Web Logic ecc.).
	</p>
	<h4 id="spring">Spring</h4>
	<p>Il framework Spring è un platform Java open-source che fornisce una completa infrastruttura di supporto per lo sviluppo rapido di applicazioni Java potenti.
	</p>
	<p>Il framework Spring è stato originariamente scritto da Rod Johnson e pubblicato per la prima volta nel giugno 2003 sotto la licenza Apache 2.0.
	</p>
</div>
</body>
</html>
测试看看 ‹/›

Il risultato è come segue:

Opzioni

Si possono passare questi opzioni tramite l'attributo data o JavaScript. La tabella seguente elenca queste opzioni:

Nome dell'opzioneTipo/Valore predefinitoNome dell'attributo Data描述
offsetnumber
Valore predefinito: 10		data-offsetQuando si calcola la posizione di scorrimento, la distanza in pixel dall'alto.

metodo

.scrollspy('refresh')Quando si chiama il metodo scrollspy con JavaScript, è necessario chiamare .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。

$('[data-spy="scroll"]').each(function () {
　　var $spy = $(this).scrollspy('refresh')
});

Esempio online

下面的示例演示了 .scrollspy('refresh') 方法的用法：

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 滚动监听(Scrollspy)插件方法</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java　
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="altezza:200px;overflow:auto; posizione: relativa;">
	<div class="section">
		<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			× Elimina questa sezione</a></small>
		</h4>
		<p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple　
			TV. iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, mentre iOS è la versione mobile di Apple.</p>
	</div>
	<div class="section">
		<h4 id="svn">SVN<small></small></h4>
		<p>Apache Subversion, solitamente abbreviato in SVN, è un software di controllo delle versioni open source. SVN è stato creato dalla società CollabNet nel 2000. Ora, tuttavia, è diventato un progetto della Apache Software Foundation, quindi gode di una vasta comunità di sviluppatori e utenti.</p>
	</div>
	<div class="section">
		<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× Elimina questa sezione</a></small>
		</h4>
		<p>jMeter è un software di test open source. È un'applicazione Java al 100%, utilizzata per test di carico e prestazioni.</p>
	</div>
	<div class="section">
		<h4 id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) è una struttura di sviluppo per creare applicazioni aziendali altamente scalabili e potenti, implementata su J2EE compatibile con server applicativi come JBOSS, Web Logic e altri.</p>
	</div>
	<div class="section">
		<h4 id="spring">Spring</h4>
		<p>Il framework Spring è un platform Java open source che fornisce una infrastruttura completa per lo sviluppo rapido di applicazioni Java potenti.</p>
		<p>Il framework Spring è stato originariamente scritto da Rod Johnson e pubblicato per la prima volta il 6 giugno 2003 sotto la licenza Apache 2.0.</p>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		removeSection = function(e) {
			$(".section").parents(e).remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')
				});
		}
		$("#myScrollspy").scrollspy();
});
</script>
</body>
</html>
测试看看 ‹/›

Il risultato è come segue:

事件

下表列出了滚动监听中要用到的事件。这些事件可在函数中作为钩子使用。

事件描述Esempio
activate.bs.scrollspy每当一个新项目被滚动监听激活时，触发该事件。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　// 执行一些动作...
});

Esempio online

下面的示例演示了 activate.bs.scrollspy 事件的用法：

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 滚动监听(Scrollspy)插件事件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">
						Java <b class="caret"></b>
					</a>
					<ul class="dropdown-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="altezza:200px;overflow:auto; posizione: relativa;">
	<div class="section">
		<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			× Elimina questa sezione</a></small>
		</h4>
		<p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple　
			TV. iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, mentre iOS è la versione mobile di Apple.</p>
	</div>
	<div class="section">
		<h4 id="svn">SVN<small></small></h4>
		<p>Apache Subversion, solitamente abbreviato in SVN, è un software di controllo delle versioni open source. SVN è stato creato dalla società CollabNet nel 2000. Ora, tuttavia, è diventato un progetto della Apache Software Foundation, quindi gode di una vasta comunità di sviluppatori e utenti.</p>
	</div>
	<div class="section">
		<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× Elimina questa sezione</a></small>
		</h4>
		<p>jMeter è un software di test open source. È un'applicazione Java al 100%, utilizzata per test di carico e prestazioni.</p>
	</div>
	<div class="section">
		<h4 id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) è una struttura di sviluppo per creare applicazioni aziendali altamente scalabili e potenti, implementata su J2EE compatibile con server applicativi come JBOSS, Web Logic e altri.</p>
	</div>
	<div class="section">
		<h4 id="spring">Spring</h4>
		<p>Il framework Spring è un platform Java open source che fornisce una infrastruttura completa per lo sviluppo rapido di applicazioni Java potenti.</p>
		<p>Il framework Spring è stato originariamente scritto da Rod Johnson e pubblicato per la prima volta il 6 giugno 2003 sotto la licenza Apache 2.0.</p>
	</div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">
	$(function() {
		removeSection = function(e) {
			$(".section").parents(e).remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')
				});
		}
		$("#myScrollspy").scrollspy();
		$('#myScrollspy').on('activate.bs.scrollspy', function () {
			var currentItem = $(".nav li.active > a").text();
			$("#activeitem").html("Stai visualizzando - " + currentItem);
		});
});
</script>
</body>
</html>
测试看看 ‹/›

Il risultato è come segue:

Più esempi

Creare un ascoltatore di scorrimento orizzontale

Esempio seguente dimostra come creare un'ascoltatore di scorrimento orizzontale:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Esempio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		body {
			position: relative;　
		}
		#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
		#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
		#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
		#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
		#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
	</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
			</button>
			<a class="navbar-brand" href="#">NomeSitoWeb</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="#section1">Sezione 1</a></li>
					<li><a href="#section2">Sezione 2</a></li>
					<li><a href="#section3">Sezione 3</a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Sezione 4 <span class="caret"></span></a></li>
						<ul class="dropdown-menu">
							<li><a href="#section41">Sezione 4-1</a></li>
							<li><a href="#section42">Sezione 4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div id="section1" class="container-fluid">
	<h1>Sezione 1</h1>
	<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
	<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
	</div>
	<div id="section2" class="container-fluid">
		<h1>Sezione 2</h1>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
	</div>
	<div id="section3" class="container-fluid">
		<h1>Sezione 3</h1>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
	</div>
	<div id="section41" class="container-fluid">
		<h1>Sezione 4 Sotto-menu 1</h1>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
	</div>
	<div id="section42" class="container-fluid">
		<h1>Sezione 4 Sotto-menu 2</h1>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
		<p>Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento! Tentare di scorrere questa sezione e osservare la barra di navigazione durante lo scorrimento!</p>
</div>
</body>
</html>
测试看看 ‹/›

Come creare un'ascoltatore di scorrimento verticale

Di seguito è riportato un esempio che dimostra come creare un'ascoltatore di scorrimento verticale:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Esempio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		body {
			position: relative;
		}
		ul.nav-pills {
			top: 20px;
			position: fixed;
		}
		div.col-sm-9 div {
			height: 250px;
			font-size: 28px;
		}
		#section1 {color: #fff; background-color: #1E88E5}
		#section2 {color: #fff; background-color: #673ab7}
		#section3 {color: #fff; background-color: #ff9800}
		#section41 {color: #fff; background-color: #00bcd4}
		#section42 {color: #fff; background-color: #009688;}
		@media screen and (max-width: 810px) {
			#section1, #section2, #section3, #section41, #section42 {
				margin-left: 150px;
			}
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
	<div class="row">
		<nav class="col-sm-3" id="myScrollspy">
			<div class="container-fluid">　
			<div class="container-fluid">　
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#section1">Sezione 1</a></li>
				<li><a href="#section2">Sezione 2</a></li>
				<li><a href="#section3">Sezione 3</a></li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">Sezione 4 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#section41">Sezione 4-1</a></li>
						<li><a href="#section42">Sezione 4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div class="col-sm-9">
			<div id="section1">　　　　
				<h1>Sezione 1</h1>
				<p>尝试滚动此部分并在滚动时查看导航列表!</p>
			</div>
			<div id="section2">　
				<h1>Sezione 2</h1>
				<p>尝试滚动此部分并在滚动时查看导航列表!</p>
			</div>　　　　　　　　
			<div id="section3">　　　　　　　　　
				<h1>Sezione 3</h1>
				<p>尝试滚动此部分并在滚动时查看导航列表!</p>
			</div>
			<div id="section41">　　　　　　　　　
				<h1>Sezione 4-1</h1>
				<p>尝试滚动此部分并在滚动时查看导航列表!</p>
			</div>　　　　　　
			<div id="section42">　　　　　　　　　
				<h1>Sezione 4-2</h1>
				<p>尝试滚动此部分并在滚动时查看导航列表!</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
测试看看 ‹/›
插件标签页 Bootstrap插件菜单 dropdown Bootstrap