PêpêcheMascotte- Messages : 4428
Les scrollbars
Jeu 23 Mai 2019 - 9:24
Astuce CSS
Les scrollbars
Coucou 
Dans ce tutoriel (qui est plutôt une "astuce"), nous allons parler de scrollbars, tu sais les petits "ascenseurs" qui permettent d'afficher de longs contenus dans un petit bloc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.
Nullam magna pede, dapibus nec, molestie et, bibendum ac, odio. Aliquam blandit sem eu massa. Nam vel diam. Vestibulum eu tellus quis ligula sollicitudin dictum. Vestibulum convallis egestas tellus. Aliquam et ante id dui mattis elementum. Morbi semper tempor nisi. Donec vestibulum. Ut ultrices dui vitae sem. Nam laoreet libero quis justo. Praesent semper, turpis id ornare gravida, ligula metus egestas justo, vitae ultricies enim nunc vitae quam. Phasellus non felis. Donec dui. Morbi eu orci. Etiam vitae pede. Aenean in sapien at elit feugiat facilisis.
Morbi tincidunt justo eu est interdum varius. In aliquam tortor sed nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur, metus in sodales suscipit, lacus erat ullamcorper dui, et hendrerit odio nisl sit amet ipsum. Maecenas hendrerit. Etiam neque lectus, suscipit in, ultrices id, ultricies id, mauris. In sagittis. Aliquam sodales adipiscing sapien. Suspendisse in est. Phasellus dolor dui, feugiat eget, commodo ut, vestibulum vel, arcu. Pellentesque luctus nisl in sapien. Integer quis mauris. In posuere urna nec dui. Integer bibendum lacus eget magna. Proin placerat nibh at purus. Maecenas suscipit nulla non nisi. Ut non risus. Sed pretium, elit ac rhoncus adipiscing, augue orci laoreet dui, eleifend gravida arcu dui sed nunc. Morbi vulputate tristique lorem.
Suspendisse turpis metus, vestibulum faucibus, egestas in, bibendum consequat, diam. Nullam sit amet sapien vel dui pharetra luctus. Cras laoreet, nisi ut suscipit malesuada, sapien lorem venenatis nunc, eu fermentum lectus mi vitae ipsum. Sed vestibulum lectus eu nunc. Ut justo magna, semper commodo, fringilla ac, faucibus et, arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce non orci. Sed commodo. Aliquam leo libero, luctus vitae, congue non, elementum sit amet, risus. Cras vulputate, leo vel tempor consectetur, eros neque tristique lacus, a mollis quam lorem et ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare ullamcorper libero.
Aenean id magna. Fusce quis pede. Etiam eu justo id ipsum feugiat adipiscing. Fusce eget lectus. Nam libero. Vivamus massa quam, malesuada quis, viverra condimentum, dictum vel, nibh. Cras ultricies nulla. In justo nisl, cursus in, eleifend ut, feugiat ac, augue. Aliquam eu eros sed enim interdum rutrum. Praesent commodo condimentum neque. Suspendisse non risus. Aliquam sapien nisl, tincidunt sed, laoreet id, viverra eu, nulla. Donec pede. Maecenas sollicitudin, nisi ac cursus scelerisque, dolor felis ullamcorper ligula, eu fermentum purus quam non pede. Aenean pharetra faucibus arcu. Morbi eu metus. Sed mattis placerat ligula. Morbi fringilla erat sit amet nisi.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Lier la CSS et le HTML
Tout d'abord, pour avoir un ascenseur sur une page, il faut qu'il appartienne à un bloc Ce bloc, nous allons le définir avec les balises "div". Si nous avons une scrollbar, c'est que la hauteur est définie (on va supposer dans un premier temps qu'on met un scroll uniquement en hauteur).
Supposons que nous ayons cette div avec ce style :
Pour lui ajouter un scroll c'est tout simple. Il faut utiliser la propriété css "overflow". Tu as ici plusieurs réglages possible ici :
• visible : c'est le réglage par défaut. avec cette valeur, le contenu dépassera du bloc ;
Comme tu peux le voir sur la dernière image, les 2 scrollbars sont affichées : celle verticale et celle horizontale.
Pour n'utiliser que celle qui t'intéresse, tu peux aussi utiliser le :
• overflow-x qui correspond à la scrollbar horizontale
• overflow-y qui correspond à la scroolbar verticale.
Dans notre exemple, nous ne nous interessons qu'à l'ascenseur vertical, nous allons donc utiliser la propriété
C'est tout pour les scrollbars. Facile non ? Ne t'inquiète pas, si tu as des questions, nous sommes là :p
Dans ce tutoriel (qui est plutôt une "astuce"), nous allons parler de scrollbars, tu sais les petits "ascenseurs" qui permettent d'afficher de longs contenus dans un petit bloc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.
Nullam magna pede, dapibus nec, molestie et, bibendum ac, odio. Aliquam blandit sem eu massa. Nam vel diam. Vestibulum eu tellus quis ligula sollicitudin dictum. Vestibulum convallis egestas tellus. Aliquam et ante id dui mattis elementum. Morbi semper tempor nisi. Donec vestibulum. Ut ultrices dui vitae sem. Nam laoreet libero quis justo. Praesent semper, turpis id ornare gravida, ligula metus egestas justo, vitae ultricies enim nunc vitae quam. Phasellus non felis. Donec dui. Morbi eu orci. Etiam vitae pede. Aenean in sapien at elit feugiat facilisis.
Morbi tincidunt justo eu est interdum varius. In aliquam tortor sed nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur, metus in sodales suscipit, lacus erat ullamcorper dui, et hendrerit odio nisl sit amet ipsum. Maecenas hendrerit. Etiam neque lectus, suscipit in, ultrices id, ultricies id, mauris. In sagittis. Aliquam sodales adipiscing sapien. Suspendisse in est. Phasellus dolor dui, feugiat eget, commodo ut, vestibulum vel, arcu. Pellentesque luctus nisl in sapien. Integer quis mauris. In posuere urna nec dui. Integer bibendum lacus eget magna. Proin placerat nibh at purus. Maecenas suscipit nulla non nisi. Ut non risus. Sed pretium, elit ac rhoncus adipiscing, augue orci laoreet dui, eleifend gravida arcu dui sed nunc. Morbi vulputate tristique lorem.
Suspendisse turpis metus, vestibulum faucibus, egestas in, bibendum consequat, diam. Nullam sit amet sapien vel dui pharetra luctus. Cras laoreet, nisi ut suscipit malesuada, sapien lorem venenatis nunc, eu fermentum lectus mi vitae ipsum. Sed vestibulum lectus eu nunc. Ut justo magna, semper commodo, fringilla ac, faucibus et, arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce non orci. Sed commodo. Aliquam leo libero, luctus vitae, congue non, elementum sit amet, risus. Cras vulputate, leo vel tempor consectetur, eros neque tristique lacus, a mollis quam lorem et ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare ullamcorper libero.
Aenean id magna. Fusce quis pede. Etiam eu justo id ipsum feugiat adipiscing. Fusce eget lectus. Nam libero. Vivamus massa quam, malesuada quis, viverra condimentum, dictum vel, nibh. Cras ultricies nulla. In justo nisl, cursus in, eleifend ut, feugiat ac, augue. Aliquam eu eros sed enim interdum rutrum. Praesent commodo condimentum neque. Suspendisse non risus. Aliquam sapien nisl, tincidunt sed, laoreet id, viverra eu, nulla. Donec pede. Maecenas sollicitudin, nisi ac cursus scelerisque, dolor felis ullamcorper ligula, eu fermentum purus quam non pede. Aenean pharetra faucibus arcu. Morbi eu metus. Sed mattis placerat ligula. Morbi fringilla erat sit amet nisi.
Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
• Les bases du HTML
• Les principales balises
• Lier la CSS et le HTML
Comment faire ?
Tout d'abord, pour avoir un ascenseur sur une page, il faut qu'il appartienne à un bloc
Ce bloc, nous allons le définir avec les balises "div". Si nous avons une scrollbar, c'est que la hauteur est définie (on va supposer dans un premier temps qu'on met un scroll uniquement en hauteur). Mise en pratique
Supposons que nous ayons cette div avec ce style :
- Code:
<div style="width:600px; height:200px; margin:auto;border: 1px solid black;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.
Nullam magna pede, dapibus nec, molestie et, bibendum ac, odio. Aliquam blandit sem eu massa. Nam vel diam. Vestibulum eu tellus quis ligula sollicitudin dictum. Vestibulum convallis egestas tellus. Aliquam et ante id dui mattis elementum. Morbi semper tempor nisi. Donec vestibulum. Ut ultrices dui vitae sem. Nam laoreet libero quis justo. Praesent semper, turpis id ornare gravida, ligula metus egestas justo, vitae ultricies enim nunc vitae quam. Phasellus non felis. Donec dui. Morbi eu orci. Etiam vitae pede. Aenean in sapien at elit feugiat facilisis.
Morbi tincidunt justo eu est interdum varius. In aliquam tortor sed nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur, metus in sodales suscipit, lacus erat ullamcorper dui, et hendrerit odio nisl sit amet ipsum. Maecenas hendrerit. Etiam neque lectus, suscipit in, ultrices id, ultricies id, mauris. In sagittis. Aliquam sodales adipiscing sapien. Suspendisse in est. Phasellus dolor dui, feugiat eget, commodo ut, vestibulum vel, arcu. Pellentesque luctus nisl in sapien. Integer quis mauris. In posuere urna nec dui. Integer bibendum lacus eget magna. Proin placerat nibh at purus. Maecenas suscipit nulla non nisi. Ut non risus. Sed pretium, elit ac rhoncus adipiscing, augue orci laoreet dui, eleifend gravida arcu dui sed nunc. Morbi vulputate tristique lorem.
Suspendisse turpis metus, vestibulum faucibus, egestas in, bibendum consequat, diam. Nullam sit amet sapien vel dui pharetra luctus. Cras laoreet, nisi ut suscipit malesuada, sapien lorem venenatis nunc, eu fermentum lectus mi vitae ipsum. Sed vestibulum lectus eu nunc. Ut justo magna, semper commodo, fringilla ac, faucibus et, arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce non orci. Sed commodo. Aliquam leo libero, luctus vitae, congue non, elementum sit amet, risus. Cras vulputate, leo vel tempor consectetur, eros neque tristique lacus, a mollis quam lorem et ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare ullamcorper libero.
Aenean id magna. Fusce quis pede. Etiam eu justo id ipsum feugiat adipiscing. Fusce eget lectus. Nam libero. Vivamus massa quam, malesuada quis, viverra condimentum, dictum vel, nibh. Cras ultricies nulla. In justo nisl, cursus in, eleifend ut, feugiat ac, augue. Aliquam eu eros sed enim interdum rutrum. Praesent commodo condimentum neque. Suspendisse non risus. Aliquam sapien nisl, tincidunt sed, laoreet id, viverra eu, nulla. Donec pede. Maecenas sollicitudin, nisi ac cursus scelerisque, dolor felis ullamcorper ligula, eu fermentum purus quam non pede. Aenean pharetra faucibus arcu. Morbi eu metus. Sed mattis placerat ligula. Morbi fringilla erat sit amet nisi.
</div>
Pour lui ajouter un scroll c'est tout simple. Il faut utiliser la propriété css "overflow". Tu as ici plusieurs réglages possible ici :
• visible : c'est le réglage par défaut. avec cette valeur, le contenu dépassera du bloc ;
- Spoiler:
- Spoiler:
- Spoiler:
- Spoiler:
Comme tu peux le voir sur la dernière image, les 2 scrollbars sont affichées : celle verticale et celle horizontale.
Pour n'utiliser que celle qui t'intéresse, tu peux aussi utiliser le :
• overflow-x qui correspond à la scrollbar horizontale
• overflow-y qui correspond à la scroolbar verticale.
Dans notre exemple, nous ne nous interessons qu'à l'ascenseur vertical, nous allons donc utiliser la propriété
- Code:
overflow-y:auto;
- Code:
<div style="width:600px; height:200px; margin:auto;border: 1px solid black;overflow-y:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.
Nullam magna pede, dapibus nec, molestie et, bibendum ac, odio. Aliquam blandit sem eu massa. Nam vel diam. Vestibulum eu tellus quis ligula sollicitudin dictum. Vestibulum convallis egestas tellus. Aliquam et ante id dui mattis elementum. Morbi semper tempor nisi. Donec vestibulum. Ut ultrices dui vitae sem. Nam laoreet libero quis justo. Praesent semper, turpis id ornare gravida, ligula metus egestas justo, vitae ultricies enim nunc vitae quam. Phasellus non felis. Donec dui. Morbi eu orci. Etiam vitae pede. Aenean in sapien at elit feugiat facilisis.
Morbi tincidunt justo eu est interdum varius. In aliquam tortor sed nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur, metus in sodales suscipit, lacus erat ullamcorper dui, et hendrerit odio nisl sit amet ipsum. Maecenas hendrerit. Etiam neque lectus, suscipit in, ultrices id, ultricies id, mauris. In sagittis. Aliquam sodales adipiscing sapien. Suspendisse in est. Phasellus dolor dui, feugiat eget, commodo ut, vestibulum vel, arcu. Pellentesque luctus nisl in sapien. Integer quis mauris. In posuere urna nec dui. Integer bibendum lacus eget magna. Proin placerat nibh at purus. Maecenas suscipit nulla non nisi. Ut non risus. Sed pretium, elit ac rhoncus adipiscing, augue orci laoreet dui, eleifend gravida arcu dui sed nunc. Morbi vulputate tristique lorem.
Suspendisse turpis metus, vestibulum faucibus, egestas in, bibendum consequat, diam. Nullam sit amet sapien vel dui pharetra luctus. Cras laoreet, nisi ut suscipit malesuada, sapien lorem venenatis nunc, eu fermentum lectus mi vitae ipsum. Sed vestibulum lectus eu nunc. Ut justo magna, semper commodo, fringilla ac, faucibus et, arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce non orci. Sed commodo. Aliquam leo libero, luctus vitae, congue non, elementum sit amet, risus. Cras vulputate, leo vel tempor consectetur, eros neque tristique lacus, a mollis quam lorem et ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare ullamcorper libero.
Aenean id magna. Fusce quis pede. Etiam eu justo id ipsum feugiat adipiscing. Fusce eget lectus. Nam libero. Vivamus massa quam, malesuada quis, viverra condimentum, dictum vel, nibh. Cras ultricies nulla. In justo nisl, cursus in, eleifend ut, feugiat ac, augue. Aliquam eu eros sed enim interdum rutrum. Praesent commodo condimentum neque. Suspendisse non risus. Aliquam sapien nisl, tincidunt sed, laoreet id, viverra eu, nulla. Donec pede. Maecenas sollicitudin, nisi ac cursus scelerisque, dolor felis ullamcorper ligula, eu fermentum purus quam non pede. Aenean pharetra faucibus arcu. Morbi eu metus. Sed mattis placerat ligula. Morbi fringilla erat sit amet nisi.
</div>
C'est tout pour les scrollbars. Facile non ? Ne t'inquiète pas, si tu as des questions, nous sommes là :p
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum