Div với css cuộn. Hai cách để tạo cuộn div dọc và ngang bằng jQuery và hơn thế nữa

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 cấu hình 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.

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

Để 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ể là 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ờ.

Kết nối plugin

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

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à tất cả các plugin phụ thuộc vào 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.

Xin chào các bạn thân mến. Như bạn có thể nhận thấy, ở hầu hết các trình duyệt, thao tác cuộn trên các trang web rất sắc nét và không đẹp mắt. Và tất nhiên, tôi muốn làm cho việc cuộn trang web của mình mượt mà hơn; tất nhiên, điều này có thể được thực hiện và hơn nữa là không cần quá căng thẳng. Việc này được thực hiện bằng cách sử dụng jQuery đơn giản plugin và một số quy tắc CSS. Và để xem tất cả hoạt động như thế nào, tôi khuyên bạn nên xem bản demo bên dưới.

Chà, bây giờ chúng ta hãy chuyển sang gắn tính năng cuộn mượt mà vào trang web của chúng ta.

HTML

Đầu tiên, chúng ta sẽ cần đính kèm thư viện JQuery. Nếu bạn đã đính kèm rồi thì bỏ qua bước này:

Sau đó chúng ta cần phải gắn bó với chính mình Trình cắm JQuery, chịu trách nhiệm cho việc cuộn mượt mà của chúng tôi và cùng với đó là sự tách biệt Quy tắc CSS tự thay đổi thanh cuộn trên trang web. Chúng ta sẽ nói nhiều hơn về thanh cuộn trong bài học tiếp theo, nhưng bây giờ chỉ là cuộn mượt mà thôi. Và đây là các quy tắc và plugin:

Tất cả. Bây giờ chúng ta đã thực hiện bước đầu tiên và quan trọng. Bây giờ chúng ta cần thêm một quy tắc đơn giản vào kiểu CSS của trang web.

CSS html, nội dung( chiều cao: 100%; )

Điều này là cần thiết để cho plugin của chúng tôi biết rằng chiều rộng của trang được kéo dài và bằng 100% chiều cao. Hãy nhớ thêm quy tắc này vào CSS của bạn, nếu không thao tác cuộn sẽ không hoạt động.

Kịch bản

Và bây giờ tôi đề xuất xem xét kỹ hơn ví dụ demo. Và chúng ta sẽ bắt đầu với HTML.

HTML trong bản demo Cuộn mượt mà cho trang web Nội dung Xin chào, Đây là văn bản để minh họa khả năng cuộn trang mượt mà trên trang web của bạn. Nó thực sự trông không tệ phải không :) Văn bản này sẽ được lặp lại. (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);

Như bạn có thể thấy, ở đây tôi đã sử dụng đánh dấu HTML5 hoàn toàn tiêu chuẩn, với tất cả các tập lệnh được chèn và Tệp CSS mà chúng ta đã nói ở trên. Tôi nghĩ rằng không có gì để giải thích ở đây; nếu bạn không hiểu gì, hãy hỏi trong phần bình luận.

Bây giờ chúng ta hãy xem các quy tắc CSS.

CSS từ bản demo @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body( màu nền: #fff; màu: #555; cỡ chữ: 14px; họ phông chữ: "Kịch bản xấu", chữ thảo; lề: 0; phần đệm: 0; chiều rộng tối thiểu: 480px; ) html, body( chiều cao: 100%; ) h2( cỡ chữ: 80px; căn chỉnh văn bản: giữa; họ phông chữ: "Tôm hùm", chữ thảo; độ dày phông chữ: 700; kiểu phông chữ: in nghiêng; màu sắc: #444; ) hr( chiều cao: 0; viền-dưới: 1px Solid #eee; lề-dưới: 50px; .cont( cỡ chữ: 30px; lề: 0 tự động ; phần đệm trên cùng: 20px; chiều rộng: 50%; .text( phần đệm trên cùng : 15px; phần đệm dưới cùng: 20px)

Các quy tắc CSS cũng rất đơn giản và không có nhiều, ngoài ra bạn cũng có thể thấy phông chữ của Google được đính kèm ở đây để làm cho bản demo trông đẹp mắt.

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 một 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

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à 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 bả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 cho 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ố 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 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.

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! Hãy để chúng tôi, những độc giả thân mến, xem xét kỹ hơn cách bạn có thể đặt trong một cửa sổ phương thức 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 cửa sổ modal có chiều rộng 500px để đặt nội dung, bạn nên đặt chiều rộng của khối văn bản nhỏ hơn một chút, trong khoảng 480px. Bạn có thể đặt chiều cao ở 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.

HTML/CSS

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

Đôi khi chỉ cần tạo một khối trên một trang có thanh cuộn riêng. Tất nhiên, ở đây chúng ta nghĩ đến những khung hình, nhưng vì chúng đã không còn hữu dụng từ lâu nên chúng không phù hợp với chúng ta. Tôi muốn một số giải pháp trong đó một cuộn có thể được thêm vào div thông thường. Và có một giải pháp như vậy, không chỉ một mà tất cả đều sử dụng các khả năng AJAX.

Cuộn dọc với jScrollPane Các từ thông dụng

jScrollPane là một plugin dành cho mục đích yêu thích của bạn thư viện jQuery. Cho phép anh ta đính kèm cuộn dọc div"y. Cuộn có thể được định cấu hình theo ý muốn. Trên trang plugin (liên kết "thông tin") bạn có thể tìm thấy nhiều cách khác nhauứng dụng của nó. Trong số đó, tôi sẽ nêu bật hai: thứ nhất - nó gợi ý các phương thức chính và kiểu cuộn bên ngoài, thứ hai - hiển thị cách thực hiện cuộn trong một trang cuộn, cũng như cuộn toàn bộ trang như vậy. Bạn có thể tải xuống plugin từ trang web chính thức, nhưng bạn cũng có thể tải xuống từ trang web của tôi

Thủ thuật nhỏ

Tôi đã sử dụng plugin này nhiều lần trong thực tế. Có thể thấy một ví dụ như vậy. Vẻ bề ngoài nó không chuẩn, điều đó tốt - bạn có thể điêu khắc bất cứ điều gì trái tim bạn mong muốn (không phải tâm hồn của bạn, bạn của tôi, mà là cho khách hàng, khách hàng - ghi chú của biên tập viên).

Đôi khi một plugin yêu cầu cài đặt các plugin bổ sung để con lăn chuột hoạt động cuộn và kích thước cuộn thay đổi tùy thuộc vào lượng nội dung. Tuy nhiên, như thực tế đã cho thấy, mọi thứ đều hoạt động mà không có chúng. Tất nhiên, có thể tôi đã vội lắp ráp plugin, nhưng điều đó khó xảy ra, có vẻ như tôi đã tải nó xuống từ plugin chính thức.

Ví dụ

Tôi sẽ không phân tích mã một cách chi tiết; về nguyên tắc, không có gì phức tạp ở đó. Tuy nhiên, tôi sẽ dừng lại ở một số điểm.

Tệp HTML. Cấu trúc của một khối khi cuộn như sau

Nội dung

Có một div bên ngoài với một lớp, có một div bên trong với mã định danh và lớp khung cuộn được yêu cầu. Tất cả. Hàm này được gọi như sau:

$(hàm()
{
$("#vnutrenniy).jScrollPane((showArrows:true, thanh cuộnWidth: 16, ArrowSize: 16));
});

Khi gọi hãy cho biết thông số khác nhau, chẳng hạn như chiều rộng của thanh cuộn (scrollbarWidth), kích thước mũi tên của nó (arrowSize), v.v. Những cái chính là như sau:

ScrollbarWidth [số] - chiều rộng cuộn (mặc định 10)

thanh cuộnMargin [số] - lề bên trái của thanh cuộn (mặc định 5)

WheelSpeed [số] - tốc độ bánh xe cuộn tính bằng pixel (mặc định 18)

showArrows [boolean] - hiển thị mũi tên đồ họa hay không (mặc định là sai)

mũi tênSize [số] - chiều cao mũi tên nếu showArrows=true (được tính qua CSS nếu không được chỉ định)

dragMinHeight [số] - chiều cao tối thiểu của thanh trượt (mặc định 0)

dragMaxHeight [số] - chiều cao tối đa thanh trượt (mặc định 99999!)

thanh cuộnOnLeft [boolean] - nếu cần thanh cuộn ở bên trái, hãy đặt nó thành đúng.

Bây giờ hãy mở tệp jscroll.css. Nhìn vào các dòng sau đây.

8-15 dòng. Chúng tôi đặt chiều rộng và chiều cao của div bên trong (!), tràn (có vẻ như không phải là tham số bắt buộc), rất có thể sẽ cần phần đệm, phần còn lại không quan trọng.

Dòng 17-19. Phân vùng bên ngoài Trong mọi trường hợp, bạn không nên chỉ định chiều cao cho nó và bạn phải chỉ định float: left . Tất cả điều này được thực hiện với một mục tiêu - để Opera 10 hoạt động bình thường khi cuộn. Nếu điều này không được tuân thủ, thì quá trình cuộn của diva sẽ đồng bộ với quá trình cuộn của trình duyệt và kết quả sẽ hoàn toàn vô nghĩa. Nhớ lấy điều này.

Dòng 23-57. Kiểu hình ảnh cuộn

Về lý thuyết, việc thay đổi các dòng còn lại là không cần thiết.

Dọc và cuộn ngang trên FleXcroll

Tôi không quen với kịch bản này. Anh ấy đi mà không có sử dụng jQuery, đây là một điểm cộng (jQuery không phải lúc nào cũng cần thiết). Ưu điểm thứ hai là có khả năng cuộn ngang. Ưu điểm thứ ba là kho lưu trữ có plugin chứa các ví dụ về cách sử dụng và những ví dụ hay, đa dạng, rất được tôn trọng.

Tôi không phải làm việc với plugin trong các dự án, nhưng lần làm quen đầu tiên tỏ ra rất dễ chịu. Nhược điểm dễ nhận thấy duy nhất là khi di chuột, con trỏ không biến thành “bút”. Tôi nghĩ đây là một điểm trừ, vì về mặt trực giác thì không rõ đây có phải là một cuộn giấy hay không. Tuy nhiên, tôi nghĩ sẽ không có vấn đề gì nếu khắc phục mọi thứ bằng CSS.

Tóm lại là

Cuộn dọc và cuộn ngang cho div không phải là vấn đề trong quá trình triển khai, mọi thứ đều đơn giản và dễ thực hiện. Vì vậy, hãy tiếp tục, sử dụng nó, khám phá những điều mới mẻ. Tôi sẽ luôn vui mừng khi nghe những nhận xét, câu hỏi, đề xuất =).