Yêu cầu thg 9 16, 2020 7:41 SA 361 0 5
  • 361 0 5
+2

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

Chia sẻ
  • 361 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 CÂU TRẢ LỜI


Đã trả lời thg 9 17, 2020 7:39 SA
Đã được chấp nhận
+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')

Chia sẻ
Avatar TaiLe @tantaile421
thg 9 17, 2020 7:43 SA

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

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.

Avatar TaiLe @tantaile421
thg 9 18, 2020 4:18 SA

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

Đã trả lời 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/

Chia sẻ
Avatar TaiLe @tantaile421
thg 9 17, 2020 3:52 SA

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

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.

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é 😄

Đã trả lời 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/

Chia sẻ
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 😦

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

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 @@

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ự

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é 😄

Đã trả lời 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

Chia sẻ
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 😃)

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 ❓

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 @@

Đã trả lời 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.

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí