Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Scroll na widoku
Forum PHP.pl > Forum > Przedszkole
edzio20
16.10.2017, 16:23:39
Witam, mam pytanie odnośnie scroll-ów.
Jak zrobić, aby scroll-e X umieszczone w div-ie były zawsze na widoku, nawet gdy dany div jest większy niż wysokość ekranu.

Kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.     <head>
  4.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.         <meta charset="utf-8"/>
  6. 	</head>
  7.  
  8. 	<style>
  9.  
  10. 	html, body	{
  11. 		padding: 0;
  12. 		margin: 0;
  13. 	}
  14.  
  15. 	#container	{
  16. 		overflow: hidden;
  17. 	}
  18.  
  19. 	#left	{
  20. 		float: left;
  21. 		width: 60%;
  22. 		overflow-x: scroll;
  23. 		background-color: rgb(210, 210, 210);
  24. 	}
  25.  
  26. 	#right	{
  27. 		float: left;
  28. 		width: 40%;
  29. 		overflow-x: scroll;
  30. 		background-color: rgb(230, 230, 230);
  31. 	}
  32.  
  33. 	</style>
  34.  
  35. 	<body>
  36.  
  37. 		<div id = "container">
  38.  
  39. 			<div id = "left">
  40. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  41. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  42. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  43. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  44. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  45. 			</div>
  46.  
  47. 			<div id = "right">
  48. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  49. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  50. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  51. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  52. 				Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>Tekst<br/>
  53. 			</div>
  54.  
  55. 		</div>
  56.  
  57. 	</body>
  58. </html>
[HTML] pobierz, plaintext


OBRAZEK SCROLLOW

Chodzi o to że scrolle zawsze znajdują się na samym dole diva, a ja chce, aby były na dole ekranu i aby zawsze mogło się je przesunąć.
Wiem, że moge dać wyskokość div-ów na 100%, ale zależy mi na tym, aby był jeden scorll pionowy co scrolluje oba divy na raz.
Nie wiem, czy za pomocą javascript można jakoś ustawić pozycje scrolla w osi y tak aby był zawsze na wierzchu.

Z góry dzieki.
trueblue
16.10.2017, 17:33:46
Dla #left i #right ustaw overflow-x:hidden, a na dole strony umieść dwa <div> o szerokościach odpowiadających tymże dwóm divom. Ustaw ich pozycje na position:fixed, overflow-x:scroll, a wysokość na 0. W środek każdego z nich dodaj <div> o szerokości wewnętrznej (scrollowalnej) rodzica, tak żeby rozepchnęły nadrzędne elementy.
Następnie dodaj do obydwu "sterujących" divów zdarzenie na "scroll" i w zależności od położenia przesuwaj oryginalne divy (scrollLeft).

Czyli należy usunąć scrolle z głównych divów, zrobić ich kopie o zerowej wysokości ze scrollbarami i wysokością 0, a do nich dodać obsługę zdarzenia "scroll".
edzio20
16.10.2017, 18:40:17
Dzięki za odpowiedz, zrobiłem tak jak napisałeś i udało mi się osiągnąć zamierzony efekt:D.

Mam jeszcze jedno pytanie a mianowicie, jak w najlepszy sposób zrobić takie coś, że jak przetrzymam przycisk myszy, na powiedzmy prawej krawędzi diva, to ten div będzie się zwiększał lub zmniejszał w zależności w którą stronę idzie myszka. Efekt podobny do ramek, gdzie można je zwiększać i zmniejszać po najechaniu na pasek pomiędzy ramkami. (jak w ogóle wykryć że myszka jest na krawędzi diva?)

Chce to zastosować do powyższego kodu, tak abym mógł dopasować szerokość diva left/right.
trueblue
16.10.2017, 18:52:50
Wykryj zdarzenie na dokumencie, nie na <div>. Mousedown (touchstart) + mousemove (touchmove).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.