Chặn bằng thanh cuộn html. Div với cuộn

Xin chào các bạn. Hôm nay chúng ta sẽ nói về việc cuộn trang web mượt mà. Tức là không phải về việc nhấp vào nút hoặc liên kết mà là về việc cuộn mượt mà khi sử dụng bánh xe hoặc thanh trượt.

Chỉ là một ghi chú ngắn, tôi vừa phải triển khai nó trên một trong các trang và tôi quyết định viết về nó trên blog trong khi đang chuẩn bị một bài viết nghiêm túc hơn (widget giảm giá), theo yêu cầu của một trong những độc giả. Artem, xin chào bạn. Tôi chưa quên!

Tất nhiên, nhiều người sử dụng các trình duyệt đã có khả năng cuộn mượt mà, nhiều người sử dụng tiện ích mở rộng trình duyệt đặc biệt, nhưng không phải tất cả. Hãy đạt được sự mượt mà trên phần lớn các thiết bị sẽ truy cập trang web của bạn.

Để giải quyết vấn đề này, tôi đã chọn plugin Malihu-custom-scrollbar-plugin, vì nó có rất nhiều khả năng:

• Dọc và/hoặc sọc ngang cuộn.
• Xung cuộn tùy chỉnh.
• Cuộn bánh xe chuột mượt mà.
• Cuộn mượt mà bằng thanh trượt.
• Hỗ trợ bàn phím và cuộn mượt mà bằng mũi tên hoặc PGUp/PgDn.
• Hỗ trợ màn hình cảm ứng.
• Chủ đề sẵn sàng để sử dụng.
• Tùy chỉnh thủ công bằng CSS.
• Tùy chọn hiển thị thanh trượt khác nhau.
• Khả năng thêm tính năng cuộn mượt mà vào các thành phần khác nhau trên trang có nó.

Tất nhiên, đối với nhiều người chức năng này có thể dư thừa. Nếu bạn chỉ muốn di chuyển mượt mà bằng bánh xe thì ở phần cuối, chúng ta sẽ xem xét một giải pháp rất đơn giản cho những mục đích này.

“Dừng lại, cuộn mượt mà trong nhiều khối khác nhau là tốt, nhưng khả năng cuộn mượt mà của trang web mà chúng ta đang tìm kiếm ở đâu?” - bạn nói. Điềm tĩnh. Chúng ta sẽ làm điều này ngay bây giờ.

Vì giải pháp được chọn là plugin jQuery nên bước đầu tiên là kết nối chính jQuery với trang web nếu bạn chưa kết nối.

Bây giờ hãy tải xuống plugin để cuộn mượt mà từ liên kết ở trên và kết nối 2 tệp với trang web.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Bạn sẽ nhận được cấu trúc sau:

Cuộn trơnđịa điểm

Điều chính cần nhớ là mọi thứ đều phụ thuộc vào plugin jQuery phải được kết nối sau chính jQuery.

Sau khi mọi thứ được kết nối, bạn cần khởi tạo tập lệnh:

(hàm ($) ( $(window).on("load", function () ( $("body").mCustomScrollbar(( theme: "dark-thin" )); )); ))(jQuery);

Và thêm một số CSS quy tắc đơn giảnđể áp dụng thao tác cuộn vào tài liệu. Ở phần đầu của biểu định kiểu của bạn, hãy thêm đánh dấu sau:

Nội dung, html ( chiều cao: 100%; tràn: ẩn; )

Thao tác này sẽ xóa thanh cuộn trình duyệt tiêu chuẩn và đặt chiều cao mà tập lệnh có thể hiểu được. Đừng lo lắng nếu bạn kết nối với một trang web đã hoàn thiện. Trong 99% trường hợp, điều này sẽ không ảnh hưởng đến đánh dấu của bạn dưới bất kỳ hình thức nào.

Nó kết nối giống hệt như cái đầu tiên, chỉ có 3 cài đặt và chỉ nặng 2,6 kilobyte:

$(function() ( jQuery.scrollSpeed(100, 800, "easeOutCubic"); ))

Trong đó số đầu tiên là bước cuộn, số thứ hai là tốc độ và số thứ ba là loại hoạt ảnh.

Đó là tất cả. Tạm biệt mọi người.

Hướng dẫn

Sử dụng thẻ div nếu bạn cần một thanh cuộn không phải cho toàn bộ trang mà chỉ cho một khu vực giới hạn của trang đó. TRONG ngôn ngữ HTML(Siêu văn bản Ngôn ngữ đánh dấu- “ngôn ngữ đánh dấu siêu văn bản”) “thẻ” là các lệnh riêng lẻ để trình duyệt hiển thị một thành phần trang cụ thể. Chớm ban đầu ở dạng đơn giản thẻ div (thường được gọi là "lớp") như thế này:
Nó ở bên trong lớp
Đây là thẻ mở và đây là thẻ đóng. Mọi thứ được đặt giữa thẻ mở và thẻ đóng đều được đặt trong một lớp giống như trong một thùng chứa và thùng chứa này có thể được cung cấp kích thước - chiều rộng và chiều cao. Việc này được thực hiện bằng cách sử dụng tham số bổ sung kiểu ("thuộc tính"), theo sau trong thẻ mở:

Đây là văn bản bên trong lớp

Chỉ định trong thuộc tính phong cách thẻ div và các quy tắc cho thanh cuộn lớp:

Đây là văn bản bên trong lớp

Ở đây tràn:tự động có nghĩa là thanh cuộn sẽ tự động xuất hiện, nghĩa là khi nội dung của lớp không vừa với kích thước đã chỉ định. Nếu tự động được thay thế bằng cuộn, thì các sọc này sẽ luôn hiện diện, bất kể chúng có cần thiết hay không. Và giá trị ẩn sẽ có tác dụng ngược lại - nó sẽ không xuất hiện, ngay cả khi nội dung của vùng chứa này không hiển thị ngoài các cạnh của nó.

Sử dụng phương pháp tương tự để thêm thanh cuộn nói chung. Theo mặc định, chúng xuất hiện khi cần thiết, nhưng nếu vì lý do nào đó cần có sự hiện diện liên tục của chúng thì quy tắc kiểu tương ứng sẽ được thêm vào mã html nguồn. Tìm thẻ đóng của tiêu đề tài liệu trong mã trang và nhập các hướng dẫn về kiểu sau trước thẻ đó:
nội dung (tràn: cuộn;)

Ngày nay, việc sở hữu một trang web riêng không phải là một điều xa xỉ mà là một điều cần thiết. Việc tạo ra nó đòi hỏi những kỹ năng và kiến ​​​​thức nhất định về html. Tạo một trang web đơn giản là khá dễ dàng. Tuy nhiên, việc trang trí và sáng tạo của nó yếu tố tương tác cung cấp chức năng bổ sung cho trang web sẽ gây khó khăn cho người mới bắt đầu. Một yếu tố tương tác làm tăng sự thuận tiện cho khách truy cập trang web là thanh cuộn. Nó đặc biệt hữu ích trong các lĩnh vực của trang web nhằm đảm bảo kết nối của nó với các tập lệnh (tương tác của trang web với người dùng).

Bạn sẽ cần

• Internet hoặc bất kỳ hướng dẫn html nào

Hướng dẫn

Điều quan trọng nhất trong mọi trường hợp là sự thuận tiện. Ý tưởng sử dụng thanh cuộn trên trang web của bạn sẽ chỉ phù hợp nếu nó không phải do mong muốn của bạn mà do nhu cầu của nó quyết định. Tạo bố cục nơi bạn muốn đặt thanh cuộn. Chọn nơi để cuộn (còn gọi là thanh cuộn).

Chọn vị trí cho thanh cuộn trên trang bạn quan tâm. Nó phải được kết nối chặt chẽ với một số phần tử (ví dụ: trương Văn bản hoặc danh sách thả xuống). Bạn phải tính toán không gian này theo pixel hoặc phần trăm. Điều này không khó thực hiện, đặc biệt nếu bố cục trang web có cấu trúc rõ ràng.

Giữa các thẻ BODY bạn nên thêm mã chuẩnđể cuộn. Bạn có thể tìm thấy nó trong bất kỳ sách giáo khoa html nào. Có hai tùy chọn - thêm đoạn này trực tiếp vào Mã HTML trang hoặc đính kèm vào bảng phong cách css. Phương pháp thứ hai thuận tiện hơn nếu bạn thay đổi không chỉ một mà toàn bộ trang web. Sau đó bạn cần phải nhập tùy chọn màu sắc thanh cuộn, nếu không nó sẽ có màu xám và không thú vị. Hình này hiển thị và gắn nhãn các phần tử cuộn. Các thông số phải được nhập giống như trong hình, bằng dấu chấm phẩy.

Bây giờ bạn chắc chắn cần phải thực hiện những cải tiến của mình. Để đảm bảo thanh cuộn trông giống nhau trong tất cả các trình duyệt, hãy kiểm tra nó trên các trình duyệt chính - trình duyệt web IE, Mozilla Firefox và Opera. Nếu cô ấy mắc một trong số đó, hãy quay lại bước đầu tiên và sửa lỗi.

Lời khuyên hữu ích

Có một cách dễ dàng để tạo thanh cuộn cho trang web. Đặt tham số chiều cao cho trang web của bạn thành 75%, sau đó cuộn sẽ tự xuất hiện. Đúng là của anh ấy cách phối màu nó vẫn đáng để thiết lập.

Nguồn:

• Trang web dành cho nhà phát triển web mới bắt đầu năm 2019

Hướng dẫn

Chấp nhận giải pháp đúng. Thanh cuộn chỉ xuất hiện trên trang web của bạn nếu nó được yêu cầu bởi nhu cầu tạo thêm sự thuận tiện cho người dùng chứ không chỉ bởi mong muốn của bạn. Tạo bố cục cho trang nơi bạn định đặt thanh cuộn. Chọn một nơi thích hợp cho nó.

Tạo một liên kết cứng nhắc của cuộn (điều này cũng có thể được gọi là thanh cuộn) với một thành phần cụ thể của trang. Đây có thể là trường văn bản đại diện cho tệp . Tính toán vị trí “đỗ xe” của làn đường bằng pixel và phần trăm. Điều này sẽ không khó chút nào nếu trang có cấu trúc rõ ràng.

Thêm mã thanh cuộn tiêu chuẩn giữa các thẻ nội dung. Nếu bạn không biết những gì Chúng ta đang nói về, tải xuống bất kỳ sách giáo khoa nào trên bố cục html. Mã sẽ được mô tả rõ ràng ở đó. Tốt nhất nên có sẵn cho những trường hợp như vậy các mẫu làm sẵn, để bạn có thể lấy một số phần tử riêng lẻ từ đó Mã chương trình, điều này làm cho cuộc sống dễ dàng hơn nhiều. Vì vậy, bạn đã tìm thấy mã. Đặt nó trực tiếp vào mã trang hoặc đính kèm nó vào bảng css, việc này đơn giản hơn nhiều nhưng chỉ khi bạn thay đổi không phải một mà là tất cả các trang của trang web.

Đặt thông số màu cho sọc, nếu không sẽ chuẩn xám, rất có thể sẽ không phù hợp với thiết kế trang web. Các tham số này được đặt theo thứ tự giống như đối với bất kỳ thông số nào khác yếu tố đồ họa trang. Kiểm tra trên một số trình duyệt, ví dụ Mozilla, Opera và Explorer. Nếu nó nằm trong bất kỳ lỗi nào trong số đó, hãy sửa lỗi mã chương trình.

Đặt tham số chiều cao trang web thành 75%, sau đó mã chương trình để cuộn sẽ được nhập tự động. Nhưng bạn vẫn cần thay đổi thanh cuộn và cụ thể là nó tùy chọn đồ họa. Điều này được mô tả trong các đoạn trước.

Thanh cuộn là các thanh dọc và ngang được đặt dọc theo bên phải (khi viết từ trái sang phải) và cạnh dưới của cửa sổ hoặc một vùng riêng biệt trong cửa sổ, được thiết kế để di chuyển nội dung theo hướng dọc hoặc ngang. Để quản lý chúng vẻ bề ngoài và hành vi trong các trang web sử dụng các thành phần của ngôn ngữ mô tả kiểu CSS (Cascading Style Sheets - “Cascading Style Sheets”), được tích hợp trong ngôn ngữ HTML.

Hướng dẫn

Sử dụng thẻ div nếu bạn cần tạo thanh cuộn không phải cho toàn bộ trang mà chỉ cho một khu vực giới hạn của trang đó. Trong HTML (Ngôn ngữ đánh dấu siêu văn bản), “thẻ” đề cập đến các lệnh riêng lẻ để trình duyệt hiển thị một thành phần trang cụ thể. Ở dạng đơn giản nhất, thẻ div (thường được gọi là “lớp”) được viết như sau:
Đây là văn bản bên trong lớp
Đây là thẻ mở và đây là thẻ đóng. Mọi thứ được đặt giữa thẻ mở và thẻ đóng đều được đặt trong một lớp giống như trong một thùng chứa và thùng chứa này có thể được cung cấp kích thước - chiều rộng và chiều cao. Điều này được thực hiện bằng cách sử dụng kiểu tham số bổ sung (“thuộc tính”), cần được thêm vào thẻ mở:

Đây là văn bản bên trong lớp

Hãy cho biết ở thuộc tính phong cách thẻ div và các quy tắc cho thanh cuộn lớp nữa:

Đây là văn bản bên trong lớp

Ở đây tràn:tự động có nghĩa là các thanh cuộn sẽ tự động xuất hiện, nghĩa là khi nội dung của lớp không vừa với kích thước đã chỉ định. Nếu tự động được thay thế bằng cuộn, thì các sọc này sẽ luôn hiện diện, bất kể chúng có cần thiết hay không. Giá trị ẩn sẽ có tác dụng ngược lại - cuộn sẽ không bao giờ xuất hiện, ngay cả khi nội dung của vùng chứa đó không hiển thị ngoài các cạnh của nó.

Sử dụng phương pháp tương tự để thêm các thanh cuộn vào toàn bộ trang. Theo mặc định, chúng xuất hiện khi cần thiết, nhưng nếu vì lý do nào đó cần có sự hiện diện liên tục của chúng trên trang, thì quy tắc kiểu tương ứng sẽ được thêm vào mã html nguồn. Tìm thẻ đóng của tiêu đề tài liệu trong mã trang và nhập các hướng dẫn về kiểu sau trước thẻ đó:
nội dung (tràn: cuộn;)

Mẹo 2: Cách tạo thanh cuộn

Ngày nay, việc sở hữu một trang web riêng không phải là một điều xa xỉ mà là một điều cần thiết. Việc tạo ra nó đòi hỏi những kỹ năng và kiến ​​​​thức nhất định về html. Tạo một trang web đơn giản là khá dễ dàng. Tuy nhiên, việc trang trí nó và tạo các yếu tố tương tác cung cấp chức năng bổ sung cho trang web sẽ gây khó khăn cho người mới bắt đầu. Một yếu tố tương tác làm tăng sự thuận tiện cho khách truy cập trang web là thanh cuộn. Nó đặc biệt hữu ích trong các lĩnh vực của trang web nhằm đảm bảo kết nối của nó với các tập lệnh (tương tác của trang web với người dùng).

Bạn sẽ cần

• Internet hoặc bất kỳ hướng dẫn html nào

Hướng dẫn

Điều quan trọng nhất trên bất kỳ trang web nào là sự thuận tiện cho người dùng. Ý tưởng sử dụng thanh cuộn trên trang web của bạn sẽ chỉ phù hợp nếu vẻ ngoài của nó không phải do mong muốn của bạn mà do sự cần thiết của nó quyết định. Bố trí trang nơi bạn muốn đặt thanh cuộn. Chọn nơi để cuộn (đây còn được gọi là thanh cuộn).

Chọn vị trí cho thanh cuộn trên trang web mà bạn quan tâm. Nó phải được liên kết chặt chẽ với một số thành phần (ví dụ: trường văn bản hoặc danh sách thả xuống). Bạn phải tính toán không gian này theo pixel hoặc phần trăm. Điều này không khó thực hiện, đặc biệt nếu bố cục trang web có cấu trúc rõ ràng.

Giữa các thẻ BODY bạn nên thêm mã cuộn tiêu chuẩn. Bạn có thể tìm thấy nó trong bất kỳ sách giáo khoa html nào. Có hai tùy chọn - thêm đoạn này trực tiếp vào mã html của trang hoặc đính kèm nó vào biểu định kiểu css. Phương pháp thứ hai thuận tiện hơn nếu bạn thay đổi không chỉ một trang mà toàn bộ trang cùng một lúc. Sau đó, bạn cần nhập thông số màu sắc cho thanh cuộn, nếu không nó sẽ có màu xám và không thú vị. Hình này hiển thị và gắn nhãn các phần tử cuộn. Các thông số phải được nhập giống như trong hình, cách nhau bằng dấu chấm phẩy.

Bây giờ bạn chắc chắn nên kiểm tra các sửa đổi của mình. Để đảm bảo thanh cuộn trông giống nhau trong tất cả các trình duyệt, hãy kiểm tra nó trên các trình duyệt chính - Internet Explorer, Mozilla Firefox và Opera. Nếu một trong số chúng không hoạt động, hãy quay lại bước đầu tiên và sửa lỗi.

Lời khuyên hữu ích

Có một cách dễ dàng để tạo thanh cuộn cho trang web. Đặt tham số chiều cao cho trang web của bạn thành 75%, sau đó cuộn sẽ tự xuất hiện. Đúng, cách phối màu của nó vẫn đáng để tùy chỉnh.

Mẹo 3: Cách thay đổi thanh cuộn

Hướng dẫn

Đưa ra quyết định đúng đắn. Thanh cuộn chỉ xuất hiện trên trang web của bạn nếu nó được yêu cầu bởi nhu cầu tạo thêm sự thuận tiện cho người dùng chứ không chỉ bởi mong muốn của bạn. Tạo bố cục cho trang nơi bạn định đặt thanh cuộn. Chọn một nơi thích hợp cho nó.

Tạo một liên kết cứng nhắc của cuộn (điều này cũng có thể được gọi là thanh cuộn) với một thành phần cụ thể của trang. Đây có thể là trường văn bản có dạng danh sách thả xuống. Tính toán vị trí “đỗ xe” của làn đường theo pixel và phần trăm. Điều này sẽ không khó chút nào nếu trang có cấu trúc rõ ràng.

Thêm mã thanh cuộn tiêu chuẩn giữa các thẻ nội dung. Nếu bạn không biết chúng ta đang nói về điều gì, hãy tải xuống bất kỳ sách giáo khoa nào về bố cục html. Nó sẽ mô tả rõ ràng cách viết mã như vậy. Đối với những trường hợp như vậy, tốt nhất bạn nên chuẩn bị sẵn các mẫu làm sẵn của các trang web tương tự để bạn có thể lấy một số thành phần riêng lẻ của mã chương trình từ đó, điều này giúp đơn giản hóa cuộc sống rất nhiều. Vì vậy, bạn đã tìm thấy mã. Đặt nó trực tiếp vào chính mã trang hoặc đính kèm nó vào bảng css, việc này đơn giản hơn nhiều nhưng chỉ khi bạn thay đổi không phải một mà là tất cả các trang của trang web.

Đặt tham số màu cho thanh, nếu không nó sẽ có màu xám tiêu chuẩn, rất có thể sẽ không phù hợp với thiết kế trang web. Các tham số này được đặt theo thứ tự giống như đối với bất kỳ thành phần đồ họa nào khác trên trang. Kiểm tra cuộn trong một số trình duyệt, ví dụ: Mozilla, Opera và Explorer. Nếu nó không hoạt động ở bất kỳ cái nào trong số đó, hãy sửa các lỗi trong mã chương trình.

Xin chào các bạn!
TRONG Gần đây Người đọc blog ngày càng quan tâm đến việc tạo và mở rộng chức năng. Gần đây tôi đã cố gắng hướng dẫn chi tiết cho bạn cách nhúng vào (văn bản), tôi hy vọng mình đã thành công.

Hôm nay, một trong những khách truy cập blog nhận thấy một tính năng mà nếu bạn thêm vào cửa sổ phương thức Chữ nhiều quá thì dài ra và không thể cuộn lên để xem toàn bộ chữ, còn nút đóng thì bị ẩn mất, tất nhiên là không tốt. Tất nhiên, cửa sổ phương thức có thể được đóng một cách hoàn hảo bằng cách nhấp vào bất kỳ vị trí nào trên trang, nhưng như anh ấy đã lưu ý một cách chính xác (từ nhận xét và điệu nhảy của mình), không phải tất cả khách truy cập trang web đều có thể đối phó với điều này... Theo đó, người đọc đã có một câu hỏi, làm thế nào để thêm thanh cuộn vào cửa sổ phương thức này?

Giải pháp và toàn bộ cơ chế thực hiện hóa ra rất đơn giản, không quan trọng bạn hiển thị văn bản trong cửa sổ chính hay trong hộp thoại. Bạn thậm chí có thể gắn thanh cuộn vào một nút! Chúng ta, những độc giả thân mến, hãy xem xét kỹ hơn cách bạn có thể đặt văn bản đồ sộ sử dụng thanh cuộn, từ đó duy trì kích thước của cửa sổ.

Chúng tôi xem xét ví dụ, người tò mò nhất nhìn vào đầu tiên nguồn trang demo và mọi thứ ngay lập tức trở nên rõ ràng, không có gì siêu nhiên. Có thể sử dụng vùng văn bản, iframe và chính trang đó - thẻ cơ thể, trong đó một thanh cuộn có thể xuất hiện theo giả thuyết, nhưng tôi đã sử dụng vùng chứa div, chỉ định mọi thứ theo kiểu tính chất cần thiết. Có một thuộc tính tuyệt vời trong CSS kiểm soát cách hiển thị nội dung phần tử khối, nếu nó hoàn toàn không vừa và vượt ra ngoài diện tích của các kích thước đã cho.

Thuộc tính này có một số giá trị, trong trường hợp của chúng tôi, chúng tôi đã sử dụng tràn: tự động, thanh cuộn sẽ chỉ được thêm khi cần thiết, tức là. khi kích thước văn bản vượt quá kích thước khối. Để được hiển thị liên tục, bạn cần đặt thuộc tính tràn để cuộn

Điều quan trọng cần lưu ý là nếu bạn đã chọn một cửa sổ phương thức có chiều rộng 500px để đặt nội dung của mình, bạn nên đặt chiều rộng của khối có văn bản nhỏ hơn một chút, trong phạm vi 480px. Bạn có thể đặt bất kỳ độ cao nào, tuy nhiên không nên đặt quá thấp; cửa sổ hẹp trông không đẹp mắt và người đọc sẽ phải cuộn liên tục. Trong ví dụ của tôi, tôi đặt chiều cao của vùng chứa div thành 300px; không ai ngăn cản bạn thử nghiệm tham số này, theo hướng này hay hướng khác.

Cuối cùng, trong đánh dấu html, chúng ta sẽ nhận được một mã đơn giản và dễ nhớ mà sau này bạn có thể dễ dàng chèn vào:

Blah blah blah - (văn bản) Blah blah blah - (văn bản) Blah blah blah - (văn bản) Blah blah blah - (văn bản) Blah blah blah - (văn bản) Blah blah blah - (văn bản)

Nếu bạn làm mọi thứ một cách chính xác, bạn sẽ có một cửa sổ bật lên tuyệt vời với thanh cuộn; một ví dụ trực quan sẽ luôn giúp bạn điều này:

Có những phương pháp khác không kém phần thú vị để giải quyết vấn đề này; có lẽ chúng tôi đã xem xét phương pháp đơn giản nhất mà không làm lộn xộn mã và sử dụng một cách không cần thiết; định dạng bổ sung Thuộc tính của thanh cuộn (scrollbar) đã được viết từ lâu, rất nhiều và chi tiết, bạn chỉ cần sử dụng công cụ tìm kiếm là bạn sẽ thấy hơn một nghìn trang có thông tin về chủ đề đó.
Vâng, tất cả những gì tôi phải làm là nói: Tạm biệt!

Tái bút: Tôi thường được hỏi làm cách nào để truy cập Google+? Mọi thứ rất đơn giản, hãy theo liên kết bên dưới, nhập tên người dùng và mật khẩu Google của bạn và bắt đầu hoạt động sôi nổi của bạn và tôi muốn bạn thêm tôi vào vòng kết nối của mình, vì sẽ có rất nhiều điều hữu ích và thú vị -)))

Chúng tôi không có học vấn, nhưng chúng tôi có cảm hứng; nếu tôi được học hành, tôi sẽ trở thành một kẻ ngốc.

Bob Marley

Với tất cả sự tôn trọng, Andrew