Last active
May 23, 2025 10:53
-
-
Save Kcko/1679cf4c4eb175eb43b00490e237fd6e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| https://jsbin.com/bihofirugo/2/edit?html,css,output | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| <img src="https://picsum.photos/id/237/200/300" alt="Foto 1"> | |
| </div> | |
| <style> | |
| .container { | |
| white-space: nowrap; | |
| overflow-x: auto; | |
| cursor: grab; | |
| user-select: none; /* Zabrání výběru textu nebo obrázků při tažení */ | |
| } | |
| .container img { | |
| display: inline-block; | |
| width: 200px; | |
| height: 150px; | |
| pointer-events: none; /* Zabrání interakci s obrázky (např. drag-and-drop obrázků) */ | |
| } | |
| .container.grabbing { | |
| cursor: grabbing; | |
| } | |
| </style> | |
| <script> | |
| const container = document.querySelector('.container'); | |
| let isDragging = false; | |
| let startX; | |
| let scrollLeft; | |
| container.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| container.classList.add('grabbing'); | |
| startX = e.pageX - container.offsetLeft; | |
| scrollLeft = container.scrollLeft; | |
| e.preventDefault(); // Zabrání výchozímu chování (např. výběr textu) | |
| }); | |
| container.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| e.preventDefault(); // Zabrání výchozímu chování při pohybu | |
| const x = e.pageX - container.offsetLeft; | |
| const walk = (x - startX) / 0.5; // Rychlost scrollování | |
| container.scrollLeft = scrollLeft - walk; | |
| }); | |
| container.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| container.classList.remove('grabbing'); | |
| }); | |
| container.addEventListener('mouseleave', () => { | |
| if (isDragging) { | |
| isDragging = false; | |
| container.classList.remove('grabbing'); | |
| } | |
| }); | |
| // Pro jistotu přidáme globální posluchač na mouseup, aby se tažení ukončilo i mimo kontejner | |
| document.addEventListener('mouseup', () => { | |
| if (isDragging) { | |
| isDragging = false; | |
| container.classList.remove('grabbing'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment