Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] Scroll na widoku
edzio20
post 16.10.2017, 16:23:39
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 16.10.2017

Ostrzeżenie: (0%)
-----


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:

  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.  
  9. html, body {
  10. padding: 0;
  11. margin: 0;
  12. }
  13.  
  14. #container {
  15. overflow: hidden;
  16. }
  17.  
  18. #left {
  19. float: left;
  20. width: 60%;
  21. overflow-x: scroll;
  22. background-color: rgb(210, 210, 210);
  23. }
  24.  
  25. #right {
  26. float: left;
  27. width: 40%;
  28. overflow-x: scroll;
  29. background-color: rgb(230, 230, 230);
  30. }
  31.  
  32. </style>
  33.  
  34. <body>
  35.  
  36. <div id = "container">
  37.  
  38. <div id = "left">
  39. 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/>
  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. </div>
  45.  
  46. <div id = "right">
  47. 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/>
  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. </div>
  53.  
  54. </div>
  55.  
  56. </body>
  57. </html>


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.

Ten post edytował edzio20 16.10.2017, 16:47:00
Go to the top of the page
+Quote Post
trueblue
post 16.10.2017, 17:33:46
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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".


--------------------
Go to the top of the page
+Quote Post
edzio20
post 16.10.2017, 18:40:17
Post #3





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 16.10.2017

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
trueblue
post 16.10.2017, 18:52:50
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Wykryj zdarzenie na dokumencie, nie na <div>. Mousedown (touchstart) + mousemove (touchmove).


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 15:14