Kích thước phần tử và cuộn – cuộn div bằng javascript

Bạn đang xem : scroll div với javascript

Có nhiều thuộc tính JavaScript cho phép chúng tôi đọc thông tin về chiều rộng, chiều cao của phần tử và các tính năng hình học khác.

Chúng tôi thường cần chúng khi di chuyển hoặc định vị các phần tử trong JavaScript.

Là một phần tử mẫu để chứng minh các thuộc tính, chúng tôi sẽ sử dụng phần tử được cung cấp bên dưới:

  & lt; div id = "example" & gt;
  ...Chữ...
& lt; / div & gt;
& lt; phong cách & gt;
  #thí dụ {
    chiều rộng: 300px;
    chiều cao: 200px;
    đường viền: 25px solid # E8C48F;
    đệm: 20px;
    tràn: tự động;
  }
& lt; / style & gt;  

Nó có đường viền, phần đệm và cuộn. Tập hợp đầy đủ các tính năng. Không có lề, vì chúng không phải là một phần của chính phần tử và không có thuộc tính đặc biệt nào cho chúng.

Phần tử trông giống như sau:

Bạn có thể mở tài liệu trong hộp cát .

Chú ý đến thanh cuộn

Hình trên minh họa trường hợp phức tạp nhất khi phần tử có thanh cuộn. Một số trình duyệt (không phải tất cả) dành không gian cho nó bằng cách lấy nó từ nội dung (được gắn nhãn là “chiều rộng nội dung” ở trên).

Vì vậy, nếu không có thanh cuộn, chiều rộng nội dung sẽ là 300px , nhưng nếu thanh cuộn rộng 16px (chiều rộng có thể khác nhau giữa các thiết bị và trình duyệt) thì chỉ 300 - 16 = 284px vẫn còn và chúng ta nên tính đến nó. Đó là lý do tại sao các ví dụ từ chương này giả định rằng có một thanh cuộn. Nếu không có nó, một số phép tính sẽ đơn giản hơn.

Vùng padding-bottom có thể chứa văn bản

Thông thường, các phần đệm được hiển thị trống trên các hình minh họa của chúng tôi, nhưng nếu có nhiều văn bản trong phần tử và nó bị tràn, thì các trình duyệt sẽ hiển thị văn bản “tràn” tại padding-bottom , đó là điều bình thường. < / p>

Đây là bức tranh tổng thể với các thuộc tính hình học:

Giá trị của các thuộc tính này về mặt kỹ thuật là các con số, nhưng những con số này là “pixel”, vì vậy đây là các phép đo pixel.

Hãy bắt đầu khám phá các thuộc tính bắt đầu từ bên ngoài của phần tử.

Những thuộc tính này hiếm khi cần thiết, nhưng chúng vẫn là những thuộc tính hình học “bên ngoài nhất”, vì vậy chúng ta sẽ bắt đầu với chúng.

offsetParent là tổ tiên gần nhất mà trình duyệt sử dụng để tính toán tọa độ trong quá trình hiển thị.

Đó là tổ tiên gần nhất là một trong những tổ tiên sau:

  1. CSS được định vị ( position tuyệt đối , tương đối , cố định hoặc cố định ) hoặc
  2. & lt; td & gt; , & lt; th & gt; hoặc & lt; table & gt; hoặc
  3. & lt; body & gt; .

Thuộc tính offsetLeft / offsetTop cung cấp tọa độ x / y liên quan đến góc trên bên trái của offsetParent .

Trong ví dụ bên dưới & lt; div & gt; bên trong có & lt; main & gt; offsetParent offsetLeft / offsetTop dịch chuyển từ góc trên bên trái của nó ( 180 ):


  & lt; main style = "position: rel" id = "main" & gt;
  & lt; bài báo & gt;
    & lt; div id = "example" style = "position: Absol; left: 180px; top: 180px" & gt; ... & lt; / div & gt;
  & lt; / bài báo & gt;
& lt; / main & gt;
& lt; script & gt;
  alert (example.offsetParent.id); // chính
  alert (example.offsetLeft); // 180 (lưu ý: một số, không phải chuỗi "180px")
  cảnh báo (example.offsetTop); // 180
& lt; / script & gt;  

Có một số trường hợp offsetParent null :

  1. Đối với các phần tử không được hiển thị ( display: none hoặc không có trong tài liệu).
  2. Đối với & lt; body & gt; & lt; html & gt; .
  3. Đối với các phần tử có position: fixed .

Bây giờ, hãy chuyển sang phần tử đó.

Hai thuộc tính này là những thuộc tính đơn giản nhất. Chúng cung cấp chiều rộng / chiều cao “bên ngoài” của phần tử. Hay nói cách khác, kích thước đầy đủ của nó bao gồm cả đường viền.

Đối với phần tử mẫu của chúng tôi:

  • offsetWidth = 390 - chiều rộng bên ngoài, có thể được tính bằng chiều rộng CSS bên trong ( 300px ) cộng với đệm ( 2 * 20px ) và đường viền ( 2 * 25px ).
  • offsetHeight = 290 - chiều cao bên ngoài.

Thuộc tính hình học là 0 / null đối với các phần tử không được hiển thị

Các thuộc tính hình học chỉ được tính cho các phần tử được hiển thị.

Nếu một phần tử (hoặc bất kỳ phần tử nào trong số tổ tiên của nó) có display: none hoặc không có trong tài liệu, thì tất cả các thuộc tính hình học bằng 0 (hoặc null cho offsetParent ).

Ví dụ: offsetParent null offsetWidth , offsetHeight 0 khi chúng tôi tạo một phần tử nhưng chưa chèn phần tử đó vào tài liệu hoặc phần tử đó (hoặc tổ tiên của nó) có display: none .

Chúng tôi có thể sử dụng công cụ này để kiểm tra xem một phần tử có bị ẩn hay không, như sau:

  function isHidden (elem) {
  return! elem.offsetWidth & amp; & amp; ! elem.offsetHeight;
}  

Xin lưu ý rằng isHidden như vậy trả về true cho các phần tử trên màn hình nhưng không có kích thước.

Bên trong phần tử, chúng ta có các đường viền.

Để đo lường chúng, có các thuộc tính clientTop clientLeft .

Trong ví dụ của chúng tôi:

  • clientLeft = 25 - chiều rộng đường viền bên trái
  • clientTop = 25 - chiều rộng đường viền trên cùng

… Nhưng nói chính xác - những thuộc tính này không phải là chiều rộng / chiều cao của đường viền, mà là tọa độ tương đối của mặt bên trong so với mặt bên ngoài.

Sự khác biệt là gì?

Nó sẽ hiển thị khi tài liệu ở chế độ từ phải sang trái (hệ điều hành bằng tiếng Ả Rập hoặc tiếng Do Thái). Khi đó, thanh cuộn không nằm ở bên phải mà ở bên trái, rồi clientLeft cũng bao gồm chiều rộng của thanh cuộn.

Trong trường hợp đó, clientLeft sẽ không phải là 25 , mà có chiều rộng thanh cuộn 25 + 16 = 41 .

Đây là ví dụ bằng tiếng Do Thái:

Các thuộc tính này cung cấp kích thước của vùng bên trong các đường viền phần tử.

Chúng bao gồm chiều rộng nội dung cùng với các khoảng đệm, nhưng không có thanh cuộn:

Trên hình trên, trước tiên chúng ta hãy xem xét clientHeight .

Không có thanh cuộn ngang, vì vậy nó chính xác là tổng của những gì bên trong đường viền: CSS-height 200px plus top and bottom paddings ( 2 * 20px ) tổng 240px .

Bây giờ clientWidth - ở đây chiều rộng nội dung không phải là 300px , mà là 284px , vì 16px bị chiếm bởi thanh cuộn. Vì vậy, tổng là 284px cộng với các khoảng đệm trái và phải, tổng 324px .

Nếu không có phần đệm, thì clientWidth / Height chính xác là vùng nội dung, bên trong đường viền và thanh cuộn (nếu có).

Vì vậy, khi không có phần đệm, chúng tôi có thể sử dụng clientWidth / clientHeight để lấy kích thước vùng nội dung.

Các thuộc tính này giống như clientWidth / clientHeight , nhưng chúng cũng bao gồm các phần được cuộn ra (ẩn):

Trên hình trên:

  • scrollHeight = 723 - là chiều cao bên trong đầy đủ của vùng nội dung bao gồm cả các phần được cuộn ra.
  • scrollWidth = 324 - là toàn bộ chiều rộng bên trong, ở đây chúng tôi không có cuộn ngang, vì vậy nó bằng clientWidth .

Chúng tôi có thể sử dụng các thuộc tính này để mở rộng phần tử theo chiều rộng / chiều cao đầy đủ của nó.

Như thế này:

  // mở rộng phần tử đến chiều cao nội dung đầy đủ
element.style.height = `$ {element.scrollHeight} px`;  

Nhấp vào nút để mở rộng phần tử:

văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản

Thuộc tính scrollLeft / scrollTop là chiều rộng / chiều cao của phần ẩn, cuộn ra của phần tử.

Trên hình bên dưới, chúng ta có thể thấy scrollHeight scrollTop cho một khối có cuộn dọc.

Nói cách khác, scrollTop là “số lượng được cuộn lên”.

scrollLeft / scrollTop có thể được sửa đổi

Hầu hết các thuộc tính hình học ở đây là chỉ đọc, nhưng scrollLeft / scrollTop có thể được thay đổi và trình duyệt sẽ cuộn phần tử.

Nếu bạn nhấp vào phần tử bên dưới, mã elem.scrollTop + = 10 sẽ thực thi. Điều đó làm cho nội dung phần tử cuộn 10px xuống.

Nhấp vào
Tôi
1
2
3
4
5
6
7
8 < br /> 9

Đặt scrollTop thành 0 hoặc một giá trị lớn, chẳng hạn như 1e9 sẽ làm cho phần tử cuộn xuống cùng / cuối tương ứng. < / p>

Chúng tôi vừa đề cập đến các thuộc tính hình học của các phần tử DOM, có thể được sử dụng để lấy chiều rộng, chiều cao và tính toán khoảng cách.

Nhưng như chúng ta đã biết từ chương Kiểu và lớp , chúng ta có thể đọc chiều cao và chiều rộng CSS bằng cách sử dụng getComputedStyle .

Vậy tại sao không đọc chiều rộng của một phần tử bằng getComputedStyle , như thế này?


  let elem = document.body;

alert (getComputedStyle (elem) .width); // hiển thị chiều rộng CSS cho elem  

Tại sao chúng ta nên sử dụng các thuộc tính hình học để thay thế? Có hai lý do:

  1. Đầu tiên, CSS width / height phụ thuộc vào một thuộc tính khác: box-sizing định nghĩa chiều rộng và chiều cao CSS “là gì”. Thay đổi về box-sizing cho mục đích CSS có thể phá vỡ JavaScript đó.

  2. Thứ hai, CSS width / height có thể là auto , chẳng hạn đối với phần tử nội tuyến:


      & lt; span id = "elem" & gt; Xin chào! & lt; / span & gt;
    
    & lt; script & gt;
      alert (getComputedStyle (elem) .width); // Tự động
    & lt; / script & gt;  

    Theo quan điểm của CSS, width: auto là hoàn toàn bình thường, nhưng trong JavaScript, chúng ta cần kích thước chính xác bằng px mà chúng ta có thể sử dụng trong tính toán. Vì vậy, ở đây chiều rộng CSS là vô dụng.

Và còn một lý do nữa: thanh cuộn. Đôi khi mã hoạt động tốt mà không có thanh cuộn sẽ trở nên lỗi với nó, vì thanh cuộn lấy không gian từ nội dung trong một số trình duyệt. Vì vậy, chiều rộng thực có sẵn cho nội dung nhỏ hơn chiều rộng CSS. Và clientWidth / clientHeight hãy tính đến điều đó.

… Nhưng với getComputedStyle (elem) .width thì tình hình lại khác. Một số trình duyệt (ví dụ: Chrome) trả về chiều rộng thực bên trong, trừ đi thanh cuộn và một số trình duyệt (ví dụ: Firefox) - chiều rộng CSS (bỏ qua thanh cuộn). Sự khác biệt giữa các trình duyệt như vậy là lý do không nên sử dụng getComputedStyle mà dựa vào các thuộc tính hình học.

Nếu trình duyệt của bạn dành không gian cho thanh cuộn (hầu hết các trình duyệt dành cho Windows đều có), thì bạn có thể kiểm tra nó bên dưới.

Phần tử có văn bản có CSS ​​ width: 300px .

Trên Hệ điều hành Windows dành cho Máy tính để bàn, Firefox, Chrome, Edge đều dành không gian cho thanh cuộn. Nhưng Firefox hiển thị 300px , trong khi Chrome và Edge hiển thị ít hơn. Đó là do Firefox trả về chiều rộng CSS và các trình duyệt khác trả về chiều rộng "thực".

Xin lưu ý rằng sự khác biệt được mô tả chỉ là về cách đọc getComputedStyle (...). width từ JavaScript, về mặt hình ảnh thì mọi thứ đều chính xác.

Các phần tử có các thuộc tính hình học sau:

  • offsetParent - là tổ tiên được định vị gần nhất hoặc td , th , table , body < / code>.
  • offsetLeft / offsetTop - tọa độ so với cạnh trên bên trái của offsetParent .
  • offsetWidth / offsetHeight - chiều rộng / chiều cao “bên ngoài” của một phần tử bao gồm cả đường viền.
  • clientLeft / clientTop - khoảng cách từ góc trên bên trái bên ngoài đến góc trên bên trái bên trong (nội dung + phần đệm). Đối với hệ điều hành từ trái sang phải, chúng luôn là chiều rộng của đường viền trái / trên cùng. Đối với hệ điều hành từ phải sang trái, thanh cuộn dọc nằm ở bên trái nên clientLeft cũng bao gồm cả chiều rộng của nó.
  • clientWidth / clientHeight - chiều rộng / chiều cao của nội dung bao gồm phần đệm nhưng không có thanh cuộn.
  • scrollWidth / scrollHeight - chiều rộng / chiều cao của nội dung, giống như clientWidth / clientHeight , nhưng cũng bao gồm phần được cuộn ra, không nhìn thấy được của phần tử.
  • scrollLeft / scrollTop - chiều rộng / chiều cao của phần trên được cuộn ra, bắt đầu từ góc trên bên trái của phần tử.

Tất cả các thuộc tính ở chế độ chỉ đọc ngoại trừ scrollLeft / scrollTop khiến trình duyệt cuộn phần tử nếu bị thay đổi.


Xem thêm những thông tin liên quan đến chủ đề cuộn div bằng javascript

Back To Top (Scroll To Top) Button Using HTML5, CSS and JavaScript

  • Tác giả: GTCoding
  • Ngày đăng: 2019-06-03
  • Đánh giá: 4 ⭐ ( 7328 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hi, in this video, you will learn how to design a back to top (scroll to top) button using HTML5, CSS and JavaScript. The scroll to top button is used in most of the websites today because a lot of websites have become single page websites.

    It makes it easy for the visitor to get back to the top (home) of the website. I hope this tutorial will be helpful to you. Thanks.

    Check out my Udemy Course:
    https://www.udemy.com/design-a-complete-responsive-business-website-from-scratch/?couponCode=GTC_WEBD_9

    Emmet Video: https://www.youtube.com/watch?v=mnPs1QPb_fA
    Source Code: https://github.com/Godsont/Back-To-Top-Button

Cách lấy vị trí cuộn của một phần tử trong JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 8148 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng Dẫn Tạo Menu Cố Định Khi Cuộn Trang Bằng Javascript

  • Tác giả: dembuon.vn
  • Đánh giá: 3 ⭐ ( 6607 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn.

    Để tạo menu cố định khi scroll chuột các...

Scroll animation bằng Javascript dành cho web UX

  • Tác giả: codetot.net
  • Đánh giá: 4 ⭐ ( 8331 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Scroll animation bằng ScrollReveal - thư viện Javascript 3.3Kb giúp cải thiện hiệu ứng cho các đối tượng trên trình duyệt web.

Nhận diện hành động cuộn lên hay xuống bằng Javascript

  • Tác giả: mangbinhdinh.vn
  • Đánh giá: 4 ⭐ ( 3473 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Smooth Scroll - javascript thuần

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 7760 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết được dịch từ bài Smooth Scroll with vanilla javascript của tác giả Gurjit Singh.

Tạo Menu cố định khi cuộn trang với Javascript đơn giản

  • Tác giả: wpvnkings.com
  • Đánh giá: 5 ⭐ ( 3769 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo Menu cố định khi cuộn trang với Javascript đơn giản

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hộp văn bản trong HTML - Thẻ HTML của trường nhập liệu - hộp html với văn bản