Asked thg 9 16, 2020 7:41 SA• 521 0 5
  • 521 0 5
+2

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

Share
  • 521 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 thg 9 17, 2020 7:39 SA
Accepted
+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
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 7:43 SA

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

0
| Reply
Share
Avatar Trung Chỉnh @fecoder-chinh
•
thg 9 17, 2020 7:54 SA

@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
Avatar TaiLe @tantaile421
•
thg 9 18, 2020 4:18 SA

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

0
| Reply
Share
Answered thg 9 16, 2020 7:44 SA
+4

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

Share
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 3:52 SA

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

0
| Reply
Share
Avatar Trần Xuân Thắng @tranxuanthang
•
thg 9 17, 2020 5:53 SA

@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
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 7:45 SA

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

+1
| Reply
Share
Answered thg 9 16, 2020 7:59 SA
+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
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 2:51 SA

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
Avatar Trần Xuân Thắng @tranxuanthang
•
thg 9 17, 2020 3:29 SA

@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
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 4:52 SA

@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
Avatar Trần Xuân Thắng @tranxuanthang
•
thg 9 17, 2020 5:34 SA

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

0
| Reply
Share
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 7:44 SA

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

+1
| Reply
Share
Answered thg 9 16, 2020 7:53 SA
+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
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 3:52 SA

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
Avatar Nguyen Quang Phu @quangphunguyen
•
thg 9 17, 2020 4:38 SA

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

0
| Reply
Share
Avatar TaiLe @tantaile421
•
thg 9 17, 2020 4:51 SA

@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 thg 9 18, 2020 8:54 SA
0

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

Share
Viblo
Let's register a Viblo Account to get more interesting posts.