Asked Sep 16th, 7:41 AM 131 0 5
  • 131 0 5
+1

[jQuery/Javascript] Thay đổi giá trị mỗi lần cuộn trang (scrollTop)

Share
  • 131 0 5

Cho mình hỏi, có func nào hoặc thư viện nào hoạt động ổn định có thể làm được việc thay đổi giá trị của 1 lần scroll không ạ? (ví dụ: mình muốn 1 lần lăn chuột sẽ cuộn trang xuống 100vh)

5 ANSWERS


Answered Sep 16th, 7:44 AM
+4

Chắc bạn cần thư viện này rồi https://alvarotrigo.com/fullPage/

Share
TaiLe @tantaile421
Sep 17th, 3:52 AM

cái này h có phí r ông ơi :v

0
| Reply
Share
Trần Xuân Thắng @tranxuanthang
Sep 17th, 5:53 AM

@tantaile421 Phí này là nếu bạn muốn royalty-free thôi. Còn bản thân thư viện vẫn hoàn toàn mã nguồn mở dưới giấy phép GPLv3.

0
| Reply
Share
TaiLe @tantaile421
Sep 17th, 7:45 AM

@tranxuanthang mình có gửi request r`, để test xem sao, cảm ơn ông nhé 😄

+1
| Reply
Share
Answered Sep 16th, 7:59 AM
+3

Nếu chỉ là một lần lăn chuột cuộn được luôn một màn hình thì cái này có thể làm chỉ cần qua CSS với scroll-snapping:

Xem thêm ở https://css-tricks.com/practical-css-scroll-snapping/

Share
TaiLe @tantaile421
Sep 17th, 2:51 AM

Mình cũng có thử giải pháp này nhưng phiên bản mới của chrome nó k cho dùng preventDefault hủy sự kiện mặc định của window, body, document nên còn vướng cái scroll cũ sau đó nó mới thực thi đoạn này 😦

0
| Reply
Share
Trần Xuân Thắng @tranxuanthang
Sep 17th, 3:29 AM

@tantaile421 mình chưa hiểu rõ ý bạn lắm. Theo cách này thì là css-only tại sao cần cả preventDefault của Javascript nhỉ.

0
| Reply
Share
TaiLe @tantaile421
Sep 17th, 4:52 AM

@tranxuanthang ở bên mình khi run demo của bạn, khi scroll nó sẽ chạy 1 đoạn nhỏ sau đó mới chạy đoạn scroll mượt, cái mình cần là hủy cái đoạn scroll nhỏ ở đầu ấy @@

+1
| Reply
Share
Trần Xuân Thắng @tranxuanthang
Sep 17th, 5:34 AM

@tantaile421 Hmm, đúng là thế thật, mặc dù thì Firefox thì không bị tương tự

0
| Reply
Share
TaiLe @tantaile421
Sep 17th, 7:44 AM

@tranxuanthang khổ nổi ai cũng xài chrome, cảm ơn ông nhé 😄

+1
| Reply
Share
Answered Sep 16th, 7:53 AM
+2

cuộn xuống với một giá trị bạn thử hàm này xem https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Share
TaiLe @tantaile421
Sep 17th, 3:52 AM

mình xũng có thử r` nhưng k hủy đc scroll mặc định nên nó cấn cấn nhìn giống lỗi lắm bạn 😃)

0
| Reply
Share
Nguyen Quang Phu @quangphunguyen
Sep 17th, 4:38 AM

@tantaile421 bạn thử sử dụng thêm option behavior smooth cho mượt chưa ❓

0
| Reply
Share
TaiLe @tantaile421
Sep 17th, 4:51 AM

@quangphunguyen đồng ý là mượt, nhưng sau khi scroll thì k thể dừng lại được, như đệ quy ấy @@

0
| Reply
Share
Answered Sep 17th, 7:39 AM
+1

Xài fullPage là ổn rồi, hoặc nếu không bạn có thể thử bắt sự kiện 'wheel' xem, mặc dù không mượt bằng.

(DEMO dưới sử dụng 'mousewheel')

Share
TaiLe @tantaile421
Sep 17th, 7:43 AM

code này kết hợp được với ScrollReveal k bạn 😄?

0
| Reply
Share
Trung Chỉnh @fecoder-chinh
Sep 17th, 7:54 AM

@tantaile421 nó là sự kiện của js nên kết hợp bình thường bạn nhé, mình update lại chút là dùng wheel event nhé. mousewheel không còn tương thích tốt nữa.

0
| Reply
Share
TaiLe @tantaile421
Sep 18th, 4:18 AM

@fecoder-chinh cảm ơn bạn nhé, để mình thử xem sao 😄

0
| Reply
Share
Answered Sep 18th, 8:54 AM
0

Bắt sự kiện onmousewheel rồi dùng hàm scrollTo to để scroll thôi.

Share