28172 sujets

CSS et mise en forme, CSS3

Comment centrer verticalement l'élément sélectionné d'une liste.

Bonjour a tous Smiley smile
Je suis nouveau ici.

Je ne sais pas si ca existe, ni comment ce composant s'appelle....Mais j'aimerais créer un composant qui a les propriétés suivantes :
C est une liste, dont l'élément sélectionné , est toujours visible et centré au centre comme sur le croquis joint.

J ai mis des scrollbars, mais elles sont inutiles, car le composant sera selectionné de facon programmée.

Si vous avez des idées comment on peut programmer cela Smiley smile
Merci
Stéph

upload/1630315215-83515-20210830110956.jpg
Modérateur
Bonjour,

il y a quelque fonctions de JavaScript que tu peut utiliser seules ou conjointement pour arriver à tes fins :

pour amener l’élément a des coordonnées.
* https://developer.mozilla.org/fr/docs/Web/API/Element/scrollTo

pour savoir où il se trouve.
* https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/offsetTop

Voir aussi https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/offsetParent et offsetLeft, offsetHeight , ...

Cdt
Merci, apparemment ca fait le job.


<!DOCTYPE html>
<html>
<head>
<style>
.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
  /* scrollbar invisible */
  overflow: hidden
}

.vertical-center {
  margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.selected {
border-radius: 10px;
  padding: 10px; 
  width: 30px;
  height: 20px;  
  /* centrage du tout dans le div : */
   margin: 0 auto;
  border: 2px solid #73ad21;
  background: rgb(128,128,128);
background: linear-gradient(170deg, rgba(128,128,128,1) 14%, rgba(24,203,62,1) 39%);
}

.roundedbox {
  border-radius: 10px;
  border: 2px solid #000000;
  padding: 10px; 
  width: 30px;
  height: 20px;  
  /* centrage horizontal du tout dans le div : */
   margin: 5px auto;
}
</style>
</head>
<body>

<div id='scrolling_div' class="container">
	
  <div class="roundedbox" >
   a
  </div>
  <div class = "roundedbox">
    b
  </div>
  <div class = "roundedbox">
    c.
  </div>
  <div class = "roundedbox">
    d.
  </div>
  <div class = "roundedbox">
    e
  </div>
  <div class="roundedbox">
    f.
  </div>
  <div class="roundedbox">
    g.
  </div>
  <div class="roundedbox">
    h.
  </div>
  <div  class="selected" >
    i.
  </div>
  <div class="roundedbox">
    j.
  </div>
  <div class="roundedbox">
    <p>d.</p>
  </div>
  <div class="roundedbox">
    <p>a.</p>
  </div>
  <div class="roundedbox">
    <p>a.</p>
  </div>

</div>

</body>
<script>
window.addEventListener('load', function () {
  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
  myelem = document.getElementsByClassName('selected');
  console.log(myelem[0]);
  var topPos = myelem[0].offsetTop;
  console.log("topPos",topPos);

const height = document.getElementById('scrolling_div').offsetHeight;
const scrolled_height = myelem[0].offsetHeight;
console.log(height);
document.getElementById('scrolling_div').scrollTop = topPos-height /2. + scrolled_height/2.  ;

});
</script>
</html>
Sujet clos
Aller à