interface Web
js tutoriel
Explication détaillée du cas de défilement de contenu à l'aide du plug-in iScroll
Explication détaillée du cas de défilement de contenu à l'aide du plug-in iScroll
Cette fois, je vais vous apporter une explication détaillée du cas du plug-in iScroll implémentant le défilement de contenu. Quelles sont les précautions pour que le plug-in iScroll implémente le défilement de contenu. Voici un cas pratique, jetons un coup d'oeil.
1. Introduction à iScroll
iScroll est un contrôle de défilement pour les applications Web. Il peut simuler le fonctionnement de la liste déroulante dans les applications IOS natives et peut également réaliser un zoom. tirez pour actualiser, capturer avec précision des éléments, personnaliser les barres de défilement et d’autres fonctions. La version utilisée par le blogueur ici est iScroll4.25. La dernière version est iScroll5. Vous pouvez la télécharger sur le site officiel.
Adresse du site officiel : http://iscrolljs.com/
2. Comment utiliser iScroll
1.Structure d'utilisation d'iScroll
La structure pour une utilisation optimale d'iScroll est généralement la suivante :
HTML :
<p id="wrapper"> <p id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </p> </p>
Remarque : 1. iScroll doit être cohérent avec l'extérieur du contenu défilant. Le wrapper n'aura d'effet que s'il est contacté.
2. Seul le premier élément enfant du wrapper peut défiler.
2. Instanciez iScroll
iScroll doit être instancié avant l'appel, le code d'instanciation est le suivant (ajoutez le code suivant dans la balise head ) :
<script src="iscroll.js"></script>
<script>
var myscroll;//myscroll是全局变量，可以任意地方调用
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>3. Exemple de test de roulement
HTML+CSS :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
var myscroll;
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<p id="wrapper">
<p id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li id="aaa">Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
</ul>
</p>
</p>
</body>
</html>4. >
Description du cas d'utilisation de la méthode filter() dans jquery
Explication détaillée de l'utilisation de la méthode filter() en jquery
Comment Vue utilise le composant Echarts d'actualisation dynamique
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment activer l'avertissement de contenu sensible sur iPhone et en savoir plus sur ses fonctionnalités
Sep 22, 2023 pm 12:41 PM
Au cours de la dernière décennie, les appareils mobiles sont devenus le principal moyen de partager du contenu avec vos amis et votre famille. La facilité d'accès, l'interface facile à utiliser et la possibilité de capturer des images et des vidéos en temps réel en font un excellent choix pour créer et partager du contenu. Cependant, il est facile pour des utilisateurs malveillants d'abuser de ces outils pour transférer du contenu indésirable et sensible qui peut ne pas convenir à la visualisation et ne nécessite pas votre consentement. Pour éviter que cela ne se produise, une nouvelle fonctionnalité « Avertissement de contenu sensible » a été introduite dans iOS17. Jetons un coup d'œil et comment l'utiliser sur votre iPhone. Qu'est-ce que le nouvel avertissement relatif au contenu sensible et comment fonctionne-t-il ? Comme mentionné ci-dessus, l'avertissement de contenu sensible est une nouvelle fonctionnalité de confidentialité et de sécurité conçue pour empêcher les utilisateurs de consulter du contenu sensible, y compris l'iPhone.
Comment changer le navigateur Microsoft Edge pour qu'il s'ouvre avec la navigation 360 - Comment changer l'ouverture avec la navigation 360
Mar 04, 2024 pm 01:50 PM
Comment changer la page qui ouvre le navigateur Microsoft Edge en navigation 360 ? C'est en fait très simple, je vais donc maintenant partager avec vous la méthode pour changer la page qui ouvre le navigateur Microsoft Edge en navigation 360. Les amis dans le besoin peuvent prendre une décision. regarde. J'espère pouvoir aider tout le monde. Ouvrez le navigateur Microsoft Edge. Nous voyons une page comme celle ci-dessous. Cliquez sur l'icône à trois points dans le coin supérieur droit. Cliquez sur "Paramètres". Cliquez sur "Au démarrage" dans la colonne de gauche de la page des paramètres. Cliquez sur les trois points affichés dans l'image dans la colonne de droite (ne cliquez pas sur "Ouvrir un nouvel onglet"), puis cliquez sur Modifier et remplacez l'URL par "0" (ou d'autres nombres dénués de sens). Cliquez ensuite sur "Enregistrer". Ensuite, sélectionnez "
Comment implémenter le défilement vers une position d'élément spécifiée en JavaScript ?
Oct 22, 2023 am 08:12 AM
Comment implémenter la fonction de défilement vers une position d'élément spécifiée en JavaScript ? Dans une page Web, lorsque nous devons concentrer l'attention de l'utilisateur sur une position d'élément spécifique, nous pouvons utiliser JavaScript pour implémenter la fonction de défilement jusqu'à la position d'élément spécifiée. Cet article présentera comment implémenter cette fonction via JavaScript et fournira des exemples de code correspondants. Tout d’abord, nous devons obtenir les informations de position de l’élément cible. Vous pouvez utiliser Element.getBoundingClient
HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique
Oct 27, 2023 pm 06:31 PM
HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique Dans la conception Web moderne, les tableaux d'affichage sont souvent utilisés pour transmettre des informations importantes et attirer l'attention des utilisateurs. Un tableau d'affichage à défilement automatique est largement utilisé sur les pages Web. Il permet au contenu du bulletin de défiler et de s'afficher sur la page sous forme d'animation, améliorant ainsi l'effet d'affichage des informations et l'expérience utilisateur. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un tableau d'affichage à défilement automatique et fournit des exemples de code spécifiques. Tout d'abord, nous avons besoin d'un HT
Surveiller le comportement de défilement des iframes
Feb 18, 2024 pm 08:40 PM
Comment surveiller le défilement d'une iframe nécessite des exemples de code spécifiques Lorsque nous utilisons la balise iframe pour intégrer d'autres pages Web dans une page Web, nous devons parfois effectuer certaines opérations spécifiques sur le contenu de l'iframe. L'un des besoins courants est d'écouter l'événement de défilement de l'iframe afin que le code correspondant puisse être exécuté lorsque le défilement se produit. Ce qui suit explique comment utiliser JavaScript pour surveiller le défilement d'une iframe et fournit des exemples de code spécifiques à titre de référence. Récupérer l'élément iframe Tout d'abord, nous avons besoin
Comment configurer Cheat Engine en chinois ? Méthode chinoise de réglage du moteur de triche
Mar 13, 2024 pm 04:49 PM
CheatEngine est un éditeur de jeu qui peut éditer et modifier la mémoire du jeu. Cependant, sa langue par défaut n'est pas le chinois, ce qui est gênant pour de nombreux amis. Alors, comment définir le chinois dans CheatEngine ? Aujourd'hui, l'éditeur vous donnera une introduction détaillée sur la façon de configurer le chinois dans CheatEngine. J'espère que cela pourra vous aider. Première méthode de paramétrage : 1. Double-cliquez pour ouvrir le logiciel et cliquez sur « modifier » dans le coin supérieur gauche. 2. Cliquez ensuite sur « paramètres » dans la liste d'options ci-dessous. 3. Dans l'interface de la fenêtre ouverte, cliquez sur « langues » dans la colonne de gauche
Où définir le bouton de téléchargement dans Microsoft Edge - Comment définir le bouton de téléchargement dans Microsoft Edge
Mar 06, 2024 am 11:49 AM
Savez-vous où définir le bouton de téléchargement pour qu'il s'affiche dans Microsoft Edge ? Ci-dessous, l'éditeur vous présentera la méthode pour définir le bouton de téléchargement à afficher dans Microsoft Edge. J'espère que cela vous sera utile. Suivons l'éditeur pour apprendre. à ce sujet ! Étape 1 : Ouvrez d'abord le navigateur Microsoft Edge, cliquez sur le logo [...] dans le coin supérieur droit, comme indiqué dans la figure ci-dessous. Étape 2 : Cliquez ensuite sur [Paramètres] dans le menu contextuel, comme indiqué dans la figure ci-dessous. Étape 3 : Cliquez ensuite sur [Apparence] sur le côté gauche de l'interface, comme indiqué dans la figure ci-dessous. Étape 4 : Enfin, cliquez sur le bouton à droite de [Afficher le bouton de téléchargement] et il passera du gris au bleu, comme le montre la figure ci-dessous. C'est ci-dessus que l'éditeur vous explique comment configurer le bouton de téléchargement dans Microsoft Edge.
Comment implémenter l'effet de défilement plein écran dans Vue
Nov 08, 2023 am 08:42 AM
Comment obtenir un effet de défilement plein écran dans Vue Dans la conception Web, l'effet de défilement plein écran peut offrir aux utilisateurs une expérience de navigation très unique et fluide. Cet article expliquera comment obtenir l'effet de défilement plein écran dans Vue.js, ainsi que des exemples de code spécifiques. Afin d'obtenir l'effet de défilement plein écran, nous devons d'abord utiliser le framework Vue.js pour construire le projet. Dans Vue.js, nous pouvons utiliser vue-cli pour créer rapidement un squelette de projet. Ensuite, nous devons introduire des bibliothèques tierces pour obtenir l'effet de défilement, comme la pleine page
