Andrea il 14:06, 22 giu 2023

2023-06-22T14:06:32Z

Andrea: /* Esempio */

2020-05-10T20:12:47Z

‎Esempio

Andrea: Creata pagina con "← jQuery e Javascript == Esempio ==

      
    
    
2020-05-10T20:12:14Z
Creata pagina con "← jQuery e Javascript  == Esempio == <pre> <div class="items">     <div class="item item1"></div>    <div class="item item2"></div>    <d..."
Nuova pagina
[[GENERALE#jQuery e Javascript|&larr; jQuery e Javascript]]



== Esempio ==

<pre>

<div class="items">



   <div class="item item1"></div>

   <div class="item item2"></div>

   <div class="item item3"></div>

   <div class="item item4"></div>

   <div class="item item5"></div>

   <div class="item item6"></div>

   <div class="item item7"></div>

   <div class="item item8"></div>

   <div class="item item9"></div>

   <div class="item item10"></div>



</div>

</pre>

Script:

 // scroll orizzontale

 scrollHorizontal( '#board-scroll' );

Css:

<pre>

   @supports ( display: grid ) {

     .items {

         width: 100%;

         overflow-x: scroll;

         overflow-y: hidden;

         white-space: nowrap;

         will-change: transform;

         user-select: none;

         cursor: pointer;

     }

     .item.active {

       background: rgba(255,255,255,0.3);

       cursor: grabbing;

       cursor: -webkit-grabbing;

     }

  }

</pre>



== Funzione ==

<pre>

/**

 * Scroll orizzontale tramite drag del mouse

 * @param string class_id class eo id dell'elemento che contiene gli elementi

 */

function scrollHorizontal( class_id ) {

   const slider = document.querySelector( class_id );

   let isDown = false;

   let startX;

   let scrollLeft;



   slider.addEventListener('mousedown', (e) => {

      isDown = true;

      slider.classList.add('active');

      startX = e.pageX - slider.offsetLeft;

      scrollLeft = slider.scrollLeft;

   });

   slider.addEventListener('mouseleave', () => {

      isDown = false;

      slider.classList.remove('active');

   });

   slider.addEventListener('mouseup', () => {

      isDown = false;

      slider.classList.remove('active');

   });

   slider.addEventListener('mousemove', (e) => {

      if (!isDown)

         return;

      e.preventDefault();

      const x = e.pageX - slider.offsetLeft;

      const walk = (x - startX) * 2; //scroll-fast

      slider.scrollLeft = scrollLeft - walk;

      console.log(walk);

   });

}

</pre>

← Versione meno recente		Versione delle 14:06, 22 giu 2023
Riga 1:		Riga 1:
−	[[GENERALE#jQuery e Javascript\|← jQuery e Javascript]]	+	[[GENERALE#jQuery e Javascript\|← jQuery e Javascript]] [[Category:Javascript]]

	== Esempio ==		== Esempio ==

Scroll orizzontale della pagina - Cronologia

Andrea il 14:06, 22 giu 2023

Andrea: /* Esempio */