Cuộn html2pdf

Cuộn liên tục qua các trang trong tài liệu của bạn thay vì chuyển qua một hoặc hai trang cùng một lúc. Đây cũng là một chế độ mặc định. Tắt hoặc bật tính năng này bằng cách chọn Xem > Liên tục hoặc bằng cách nhấp vào mục menu Thanh bên. Cài đặt này vẫn tồn tại trên các tài liệu mới mở

thanh cuộn

Thanh cuộn xuất hiện khi chế độ xem tài liệu không vừa với nội dung của trang trong cửa sổ hiện tại. Bạn có thể nhấp và kéo thanh cuộn để đi đến phần tài liệu bị ẩn hoặc sử dụng cử chỉ trên bàn di chuột

Dụng cụ cầm tay

Trong khi phóng to, hãy sử dụng Công cụ cầm tay để xoay quanh tài liệu của bạn. Phóng to bằng cách nhấn phím Tùy chọn, thu nhỏ bằng Lệnh + Tùy chọn

Lên trang và xuống trang

Để chuyển sang trang tiếp theo của tài liệu, hãy sử dụng các nút Lên/Xuống trên Thanh công cụ. Sử dụng bàn phím để chuyển lên và xuống qua các trang trong tài liệu của bạn

Scrolling Nav là hiệu ứng cho Nav khi chúng ta scroll xuống nội dung tiếp theo thì trên thanh Nav sẽ thêm hoạt ảnh vào để tạo hiệu ứng đẹp mắt 😁

Thông thường chúng ta sử dụng Scrolling Nav for one page. Tức là các phần như Giới thiệu, Dịch vụ, Liên hệ sẽ ở trong một trang và khi chúng ta cuộn, tới phần nào thì tương ứng trên thanh Nav sẽ thêm hoạt ảnh

Chúng ta sẽ cùng thực hiện cách tạo Scrolling Nav nhé 🔥

THỬ NGHIỆM

Đầu tiên các bạn hãy xem DEMO mình đã có sẵn bên dưới đây

Như DEMO các bạn có thể thấy khi mình scroll tới phần nào thì trên thanh Navigation sẽ được đánh dấu để ta biết đang ở nội dung đó

Thực hành

Mình sẽ bổ sung đoạn HTML chính sau đây để giải thích cho các bạn ⚡

Đầu tiên chúng ta sẽ tạo một thanh Nav, href là # + ví trị muốn cuộn đến

  

    About
  
  

    Services
  
  

    Contact
  

Lưu ý. khi thanh Nav you to be fixed sẽ gặp trường hợp khi nhấp vào nội dung muốn cuộn đến sẽ bị thanh Nav overup. Mình đã có cách xử lý cho trường hợp này, các bạn đọc tại đây

Sau đó ta tạo một section chứa id để click vào Nav sẽ tự động cuộn đến section này. Ví dụ ta tạo một phần có id là dịch vụ

  

    
Services we offer
    

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Aut optio velit inventore, expedita quo laboriosam possimus
      ea consequatur vitae, doloribus consequuntur ex. Nemo
      assumenda laborum vel, labore ut velit dignissimos.
    
  

Mình đã tạo sẵn HTML và kết quả là DEMO trên 😄👉

Tiếp tục theo ta đến phần JavaScript

Đầu tiên ta sẽ lấy tất cả các thẻ chứa href đến các phần và các phần chứa id

const navItems = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.section');

Sau khi lấy xong ta thêm event scroll cho window

Mình truyền thụ động. đúng để cải thiện hiệu suất cho cuộn. Tìm hiểu thêm tại đây

Tiếp theo ta cần xử lý. Get the position of section and id of it. To get the position of section so with top mình dùng offsetTop

Mỗi phần sẽ có vị trí khác nhau, top = section.offsetTop - 50 sẽ là vị trí của phần. Lí do mình bỏ đi 50px là do thanh Nav có chiều cao là 50px, Ta sẽ bỏ chiều cao của thanh Nav đi

Tiếp theo ta sẽ lấy href của nav-item và id của section

When used navItem. href ta sẽ nhận được toàn bộ đường dẫn như sau

http://127.0.0.1:5500/scrollNav/index.html#about. Vì mình chỉ muốn lấy #about cho giống với id đã đặt cho section nên ta sẽ sử dụng match() và truyền biểu thức chính quy vào. Kết quả trả về trong trường hợp trên là một chuỗi các chuỗi đã khớp

Tiếp theo ta sẽ so sánh chuỗi lấy được với chuỗi id của phần

Add condition if ta scroll to the position of section ta will add animation

Go here ta near Successful. 🔥. Tuy nhiên, điều kiện để chỉ thêm lớp hoạt động khi cuộn đến phần vị trí, thay vào đó còn điều kiện để xóa lớp, ví dụ ta cuộn về đầu trang không phải vị trí của mỗi phần trên kia thì sao 🧐

Ta chỉ cần thêm các điều kiện sau để hoàn thành Thanh cuộn điều hướng 👇

const top = section.offsetTop - 50;
const html = document.documentElement;
const height = section.offsetHeight;

if (html.scrollTop >= top && top + height >= html.scrollTop) {
  hrefNav === idSection
    ? navItem.parentElement.classList.add('active')
  : navItem.parentElement.classList.remove('active');
} else {
  hrefNav === idSection &&
    navItem.parentElement.classList.remove('active');
}

Mình sẽ giải thích điều kiện trên

html.scrollTop >= top && top + height >= html.scrollTop. Điều kiện này xảy ra khi ta cuộn đến vị trí của phần và lúc này vị trí cuộn vẫn ở phần nội dung chưa vượt ra ngoài

If scrolling too top + height, thì có nghĩa là vị trí cuộn hiện tại đã thoát khỏi nội dung của phần

Ngược lại tức là ta đã rời khỏi phần định vị => Ta sẽ xóa lớp đang hoạt động của mục Nav vừa thêm lớp đang hoạt động. nếu thắc mắc các bạn hay bỏ qua đoạn hrefNav === idSection rồi scroll sẽ hiểu ^^

Đây là mã hoàn chỉnh của chúng tôi

Đây là kết quả ^^

Kết luận

Như vậy là chúng ta đã hoàn tất thành công Scrolling Nav. Khá hay ho đúng sai 😄. Nếu có thắc mắc gì các bạn có thể liên hệ mình nhé 🔥