Ẩn cuộn nhưng để lại cuộn. Ẩn thanh cuộn nhưng vẫn cho phép cuộn

Làm thế nào để tắt tính năng cuộn?

Câu trả lời của Thầy:

Tính năng cuộn là cần thiết khi bạn cần di chuyển xung quanh một tài liệu hoặc trang web và kích thước của chúng không giới hạn kích thước màn hình. Có cuộn dọc và cuộn ngang. Nếu tính năng cuộn bị vô hiệu hóa, việc xem toàn bộ tài nguyên sẽ không thể thực hiện được.

Cuộn là một cài đặt có thể định cấu hình. Các cài đặt cơ bản có thể được đặt bằng cách sử dụng “Chuột” và chúng sẽ áp dụng cho tất cả các ứng dụng, đồng thời có thể đặt và hủy phương thức cuộn bằng trình duyệt. Các cài đặt này sẽ hoạt động khi lướt Internet.

Để tắt tính năng cuộn mượt mà trong khi duyệt tài nguyên Internet, hãy khởi chạy trình duyệt và chọn phần “Cài đặt” trong menu “Công cụ”. Đối với Internet Explorer, đây sẽ là menu Tools và phần Internet Options. Nếu menu không được hiển thị, hãy nhấp vào bảng trên cùng hoặc dưới cùng của cửa sổ trình duyệt và đánh dấu mục phụ “Thanh menu” hoặc “Thanh menu” trong menu bằng bút đánh dấu.

Sau khi mở cửa sổ “Cài đặt”, hãy chuyển đến tab “Nâng cao” và kích hoạt tiểu mục “Chung”. Tìm nhóm “Xem trang web” và bỏ chọn “Sử dụng Cuộn trơn", sau đó nhấp vào nút "OK".

Để tắt tính năng cuộn tự động, hãy bỏ chọn hộp “Sử dụng tính năng cuộn tự động”. Dành cho Internet Con đường thám hiểm sẽ hơi khác một chút - bạn cần di chuyển qua danh sách cài đặt có sẵn, sử dụng thanh cuộn cho đến khi tìm thấy các mục cần thiết.

Để cấu hình Thông số chung cuộn, chuyển sang thành phần “Chuột” mà chúng tôi gọi là “Bảng điều khiển” (từ menu “Bắt đầu”). Hãy chuyển đến danh mục "Máy in và thiết bị khác" và nhấp vào biểu tượng "Chuột".

Cửa sổ “Thuộc tính: Chuột” sẽ mở ra, sau đó bạn cần chuyển đến tab “Bánh xe” và định cấu hình cuộn theo yêu cầu của bạn. Điểm đánh dấu được đặt trong trường “Màn hình” sẽ di chuyển hình ảnh trên màn hình đến một khoảng cách bằng chiều cao màn hình.

Nếu vì chúng tôi thông số này quá lớn, bạn có thể đặt điểm đánh dấu trong trường “Đối với số dòng được chỉ định” và nhập giá trị được yêu cầu bằng bàn phím hoặc nút mũi tên. Giá trị “0” không thể được đặt. Áp dụng các thay đổi được thực hiện và đóng cửa sổ.

25 câu trả lời

Chỉ là một bài kiểm tra hoạt động tốt.

#parent( chiều cao: 100%; chiều rộng: 100%; tràn: ẩn; ) #child( chiều rộng: 100%; chiều cao: 100%; tràn-y: cuộn; đệm-phải: 17px; /* Tăng/giảm giá trị này để tương thích với nhiều trình duyệt */ box-sizing: content-box; /* Vì vậy chiều rộng sẽ là 100% + 17px */ )

JavaScript:

Vì chiều rộng của thanh cuộn khác nhau ở các trình duyệt khác nhau, tốt hơn là xử lý nó với sử dụng JavaScript. Nếu bạn thực hiện Element.offsetWidth - Element.clientWidth, chiều rộng chính xác của thanh cuộn sẽ xuất hiện.

hoặc

Sử dụng Vị trí: tuyệt đối,

#parent( chiều cao: 100%; chiều rộng: 100%; tràn: ẩn; vị trí: tương đối; ) #child( vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: -17px; /* Tăng/ Giảm giá trị này để tương thích giữa nhiều trình duyệt */ tràn-y: cuộn )

Thông tin:

Dựa trên câu trả lời này, tôi đã tạo một plugin cuộn đơn giản. Hy vọng điều này sẽ giúp được ai đó.

Dễ dàng trong Webkit, với kiểu dáng bổ sung:

Html ( tràn: cuộn; tràn-x: ẩn; ) ::-webkit-scrollbar ( width: 0px; /* xóa khoảng trắng thanh cuộn */ nền: trong suốt; /* tùy chọn: chỉ ẩn thanh cuộn */ ) /* tùy chọn: hiển thị chỉ báo vị trí màu đỏ */ ::-webkit-scrollbar-thumb ( nền: #FF0000; )

Điều này hiệu quả với tôi:

Vùng chứa ( -ms-overflow-style: none; // Tràn IE 10+: -moz-scrollbars-none; // Firefox ) .container::-webkit-scrollbar ( display: none; // Safari và Chrome )

Ghi chú: TRONG phiên bản mới nhất Thuộc tính Firefox -moz-scrollbars-none không được dùng nữa (liên kết).

Khu vực có thể cuộn của tôi

Đây là một thủ thuật để chồng chéo một phần thanh cuộn với div chồng chéo không có thanh cuộn

::-webkit-scrollbar ( display: none; )

cái này chỉ dành cho trình duyệt webkit. hoặc bạn có thể sử dụng css của trình duyệt (nếu có trong tương lai), mỗi trình duyệt có thể có một thuộc tính cụ thể và khác nhau cho các thanh tương ứng của chúng.

- BIÊN TẬP -

Vì Microsoft Edge sử dụng: -ms-overflow-style: -ms-autohiding-scrollbar; hoặc -ms-overflow-style: none; như đối với MSDN.

Không tương đương với FF Mặc dù có một plugin JQuery để đạt được điều này http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

CẬP NHẬT: Firefox hiện hỗ trợ ẩn thanh cuộn bằng sử dụng CSS, vì vậy tất cả các trình duyệt chính (Chrome, Firefox, IE, Safari, v.v.) hiện đều có sẵn. Chỉ cần áp dụng CSS sau cho thành phần mà bạn muốn xóa thanh cuộn:

Vùng chứa ( tràn-y: cuộn; chiều rộng thanh cuộn: không có; /* Firefox */ -ms-overflow-style: không có; /* IE 10+ */ ) .container::-webkit-scrollbar ( /* WebKit */ chiều rộng: 0px)

Đây là giải pháp đa trình duyệt ít hack nhất mà tôi biết hiện tại. Kiểm tra bản demo.

TRẢ LỜI GỐC:

Đây là một cách khác chưa được đề cập. Nó thực sự đơn giản và chỉ liên quan đến hai div và CSS. Không cần JavaScript hoặc CSS gốc và nó hoạt động trong tất cả các trình duyệt. Điều này không yêu cầu thiết lập rõ ràng chiều rộng của vùng chứa, điều này làm cho nó trở nên linh hoạt.

Phương pháp này sử dụng lề âm để di chuyển thanh cuộn ra ngoài phần tử gốc và sau đó cùng một khoảng đệm để trả nội dung về vị trí ban đầu. Kỹ thuật này hoạt động để cuộn dọc, ngang và hai chiều.

Theo trang, cách tiếp cận này không cần biết trước độ rộng của thanh cuộn để hoạt động và giải pháp cũng hoạt động cho tất cả các trình duyệt và chúng có thể được nhìn thấy.

Điều tốt là bạn không bị buộc phải sử dụng bố cục hoặc chiều rộng để ẩn thanh cuộn.

Điều này cũng cải thiện khả năng mở rộng. Giải pháp về khoảng đệm/chiều rộng hiển thị thanh cuộn khi tăng lên mức tối thiểu.

Phần tử, .outer-container ( chiều rộng: 200px; chiều cao: 200px; ) .outer-container ( đường viền: 5px màu tím đậm; vị trí: tương đối; tràn: ẩn; ) .inner-container ( vị trí: tuyệt đối; trái: 0; tràn -x: ẩn; tràn-y: cuộn; đệm-phải: 150px; ) .inner-container::-webkit-scrollbar ( display: none; )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên phương tiện quam nibh, eu tristique Tellus dignissim quis. Gia vị số nguyên ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pelentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Bạn có tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie ninc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam và volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam trong ante eu ultricies.

Parent( vị trí: tương đối; chiều rộng: 300px; chiều cao: 150px; đường viền: 1px màu đen đặc; tràn: ẩn; ) .child ( chiều cao: 150px; chiều rộng: 318px; tràn-y: cuộn; )

Áp dụng CSS cho phù hợp.

#subparant( tràn:ẩn; chiều rộng: 500px; đường viền: 1px rgba(0,0,0,1.00) rắn; ) #parent( chiều rộng: 515px; chiều cao: 300px; tràn-y: tự động; tràn-x: ẩn; độ mờ:10%; ) #child( width:511px; màu nền:rgba(123,8,10,0.42); )

Hàm tải lạiScrollBars() ( document.documentElement.style.overflow = "auto"; // firefox, chrome document.body.scroll = "yes"; // tức là chỉ ) function unloadScrollBars() ( document.documentElement.style.overflow = "hidden"; // firefox, chrome document.body.scroll = "no" // tức là chỉ )

Gọi các hàm này cho bất kỳ điểm nào bạn muốn tải hoặc dỡ tải hoặc tải lại thanh cuộn. Vẫn cuộn trong Chrome khi tôi thử nghiệm nó trong Chrome. Không chắc chắn về các trình duyệt khác.

Vấn đề của tôi: Tôi không muốn bất kỳ kiểu dáng nào trong html của mình, tôi muốn nội dung của mình cuộn mà không có thanh cuộn và chỉ cuộn dọc hoạt động với lưới css cho mọi kích thước màn hình.

Hiệu ứng thả kích thước hộp hoặc giá trị lề, chúng hoạt động với theo hộp: kích thước nội dung.

Tôi vẫn cần lệnh "-moz-scrollbars-none" và giống như gdoron và Mr_Green, tôi phải ẩn thanh cuộn. Tôi đã thử -moz-transform và -moz-padding-start để chỉ ảnh hưởng đến firefox, nhưng có những tác dụng phụ cần phải nỗ lực nhiều.

Giải pháp này hoạt động cho nội dung nội dung html với kiểu "display: lưới" và nó phản hồi nhanh.

/* ẩn thanh cuộn html và nội dung trong ngữ cảnh lưới css */ html,body( vị trí: tĩnh; /* hoặc tương đối hoặc cố định ... */ box-sizing: content-box; /* quan trọng đối với việc ẩn thanh cuộn */ hiển thị: lưới /* cho lưới css */ /* toàn màn hình*/ chiều rộng: 100vw; chiều rộng tối thiểu: 100vw; chiều rộng tối đa: 100vw; chiều cao: 100vh; chiều cao tối thiểu: 100vh; chiều cao tối đa: 100vh; lề: 0; phần đệm: 0; ) html( -ms-overflow-style: none; /* IE 10+ */ tràn: -moz-scrollbars-none; /* nên ẩn thanh cuộn */ ) /* không có thanh cuộn cho Safari và Chrome */ html: :-webkit-scrollbar, body::-webkit-scrollbar( display: none; /* có thể là đủ */ nền: trong suốt; khả năng hiển thị: ẩn; chiều rộng: 0px; ) /* Cách giải quyết chỉ dành cho Firefox */ @-moz-document url-prefix() ( /* Tạo html bị ẩn tràn */ html( tràn: ẩn; ) /* Tự động tạo chiều cao tối đa của nội dung */ /* đặt thanh cuộn bên phải ra khỏi màn hình */ body( /* bật nội dung cuộn * / max-height: auto; /* 100vw +15px: thủ thuật đặt thanh cuộn ra ngoài màn hình */ width: calc(100vw + 15px); min-width: calc(100vw + 100vw + 15px); * đặt lại nội dung bên trong màn hình */ đệm-right: 15px; ) body( /* cho phép cuộn dọc */ tràn-y: cuộn; )

Đây là cách tôi thực hiện để cuộn ngang, chỉ CSS và hoạt động tốt với các khung như bootstrap/col*. Điều này chỉ yêu cầu thêm 2 div và cha mẹ có chiều rộng hoặc chiều rộng tối đa:

Bạn có thể chọn văn bản để cuộn hoặc cuộn bằng ngón tay nếu bạn có màn hình cảm ứng.

Tràn-x-scroll-no-scrollbar (tràn:ẩn;) .overflow-x-scroll-no-scrollbar div ( tràn-x:hidden; lề-bottom:-17px; tràn-y:ẩn; chiều rộng:100% ; ) .overflow-x-scroll-no-scrollbar div * ( tràn-x:auto; width:100%; đệm-bottom:17px; khoảng trắng: nowrap; con trỏ: con trỏ ) /* các lớp sau chỉ có ở đây để làm cho ví dụ trông đẹp hơn */ .row (width:100%) .col-xs-4 (width:33%;float:left) .col-xs-3 (width:25%;float:left) .bg -gray(background-color:#DDDDDD) .bg-orange(background-color:#FF9966) .bg-blue(background-color:#6699FF) .bg-orange-light(background-color:#FFAA88) .bg -ánh sáng xanh(màu nền:#88AAFF)

Cột 1

Cột 2

Cột 3

Nội dung 1

Nội dung 3

Phiên bản ngắn dành cho người lười biếng:

Nội dung này quá dài so với vùng chứa nên cần được ẩn nhưng có thể cuộn mà không cần thanh cuộn

TRONG trình duyệt hiện đại bạn có thể sử dụng sự kiện bánh xe https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// nội dung là phần tử bạn muốn áp dụng hiệu ứng cuộn bánh xe content.addEventListener("wheel", function(e) ( const step = 100; // cần cuộn bao nhiêu pixel nếu(e.deltaY > 0) // cuộn xuống content.scrollTop += step; else //cuộn lên content.scrollTop -= step ));

Việc thêm phần đệm vào div bên trong, như trong câu trả lời hiện được chấp nhận, sẽ không hoạt động nếu vì lý do nào đó bạn muốn sử dụng box-model: border-box .

Điều có tác dụng trong cả hai trường hợp là tăng chiều rộng của div bên trong lên 100% cộng với chiều rộng của thanh cuộn (giả sử tràn: ẩn trên div bên ngoài).

Ví dụ: trong CSS:

Container2 ( chiều rộng: calc(100% + 19px); )

Trong Javascript, trình duyệt chéo:

Var child = document.getElementById("container2"); var addWidth = child.offsetWidth - child.clientWidth + "px"; child.style.width = "calc(100% + " + addWidth + ")";

cái này sẽ ở trong cơ thể:

đây là bước đầu tiên

đây là bước thứ 2

đây là bước thứ 3

#maincontainer ( nền: xám ; chiều rộng: 101%; chiều cao: 101%; tràn: tự động; vị trí: cố định; ) #child ( nền: trắng; chiều cao: 500px; )

Đây là một loại giải pháp divitis không phù hợp với tất cả các trình duyệt...

Đánh dấu trông như thế này và phải ở bên trong một cái gì đó với định vị tương đối(và chiều rộng của nó phải được đặt thành ví dụ 400px):

Thanh cuộn ẩn ( tràn: ẩn; vị trí: tuyệt đối; trên cùng: 0; trái: 0; phải: 0; dưới cùng: 0; ) .scrollbar ( tràn-y: cuộn; vị trí: tuyệt đối; trên cùng: 0; trái: 0; phải: -50px; dưới cùng: 0; ) .scrollbar-inner ( width: 400px; )

Trong bài viết này, chúng tôi sẽ xem xét chi tiết thuộc tính tràn với tất cả các giá trị của nó, thuộc tính này cũng cho phép bạn thêm hoặc xóa thanh cuộn ngang/dọc. Nói cách khác, làm thế nào để tạo thanh cuộn.

Tràn trong CSS chịu trách nhiệm về cách hiển thị thông tin trong một khối nếu nội dung vượt quá chiều cao hoặc chiều rộng của khối này. Thuộc tính này chỉ áp dụng cho khối yếu tố(display : block ; hoặc những cái ban đầu bị chặn - div, v.v.).

Các giá trị có thể có mà thuộc tính này nhận (hiển thị theo mặc định):

Hiển thị - Toàn bộ nội dung của phần tử được hiển thị, thậm chí vượt quá chiều cao và chiều rộng được chỉ định.
Ẩn - Chỉ hiển thị vùng bên trong phần tử, phần còn lại sẽ bị ẩn.
Cuộn - Thanh cuộn luôn được thêm vào.
Thanh cuộn tự động chỉ được thêm vào khi cần thiết.
Kế thừa - Kế thừa giá trị của cha mẹ.

Thông thường, thuộc tính này được sử dụng để xóa hoặc thêm thanh cuộn vào một phần tử. Ví dụ, đây là cách họ xử lý các khung để không nhồi nhét chúng vào kích thước đầy đủ. Hoặc để chèn một số văn bản lớn, để nó không chiếm nửa trang mà nằm thoải mái trong một khối đặc biệt và ở đó nó có thể được cuộn và đọc. Phần lớn, tài sản này giải quyết được vấn đề hiển thị thông tin một cách thoải mái.

Trong bản demo, bạn có thể thấy từng giá trị thuộc tính hoạt động như thế nào trong thực tế:

Mã HTML

Trang

dễ thấy

ẩn giấu

Các đồng chí! Sự khởi đầu của công việc hình thành lập trường hàng ngày đóng vai trò quan trọng trong việc hình thành hệ thống có sự tham gia của quần chúng. Tầm quan trọng của những vấn đề này rõ ràng đến mức sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi đòi hỏi phải xác định và làm rõ các đề xuất mới. Vì vậy, việc củng cố và phát triển cấu trúc là một thử nghiệm thú vị trong việc thử nghiệm mô hình phát triển. Nhiệm vụ của tổ chức, đặc biệt là mô hình mới hoạt động tổ chức V. đến một mức độ lớn quyết định việc tạo ra một hệ thống đào tạo nhân sự đáp ứng nhu cầu cấp thiết.

Kinh nghiệm đa dạng và phong phú trong việc củng cố và phát triển cơ cấu cho phép chúng ta đánh giá tầm quan trọng của các lĩnh vực phát triển tiến bộ. Như vậy phát triển hơn nữa nhiều hình thức hoạt động khác nhau cho phép bạn thực hiện các nhiệm vụ quan trọng trong việc phát triển các đề xuất mới. Thực tiễn hàng ngày cho thấy rằng việc thực hiện các mục tiêu đã hoạch định đảm bảo sự tham gia của một vòng tròn rộng rãi (các chuyên gia) vào việc hình thành các vị trí mà những người tham gia đảm nhận liên quan đến nhiệm vụ được giao. Tầm quan trọng của những vấn đề này quá rõ ràng đến nỗi việc củng cố và phát triển cơ cấu này là một thử nghiệm thú vị trong việc kiểm tra các điều kiện hành chính và tài chính thiết yếu. Do đó, sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi cho phép chúng tôi đánh giá tầm quan trọng của các hình thức phát triển. Những cân nhắc về mặt tư tưởng thứ tự cao hơn, cũng như khuôn khổ và địa điểm đào tạo nhân sự, đảm bảo có sự tham gia rộng rãi của các (chuyên gia) vào việc hình thành các vị trí mà người tham gia đảm nhận liên quan đến nhiệm vụ được giao.

cuộn

Các đồng chí! Sự khởi đầu của công việc hình thành lập trường hàng ngày đóng vai trò quan trọng trong việc hình thành hệ thống có sự tham gia của quần chúng. Tầm quan trọng của những vấn đề này rõ ràng đến mức sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi đòi hỏi phải xác định và làm rõ các đề xuất mới. Vì vậy, việc củng cố và phát triển cấu trúc là một thử nghiệm thú vị trong việc thử nghiệm mô hình phát triển. Nhiệm vụ của tổ chức, đặc biệt là mô hình hoạt động tổ chức mới quyết định phần lớn đến việc xây dựng một hệ thống đào tạo nhân sự, đáp ứng nhu cầu cấp thiết.

Kinh nghiệm đa dạng và phong phú trong việc củng cố và phát triển cơ cấu cho phép chúng ta đánh giá tầm quan trọng của các lĩnh vực phát triển tiến bộ. Do đó, sự phát triển hơn nữa của các hình thức hoạt động khác nhau cho phép chúng tôi thực hiện các nhiệm vụ quan trọng trong việc phát triển các đề xuất mới. Thực tiễn hàng ngày cho thấy rằng việc thực hiện các mục tiêu đã hoạch định đảm bảo sự tham gia của một vòng tròn rộng rãi (các chuyên gia) vào việc hình thành các vị trí mà những người tham gia đảm nhận liên quan đến nhiệm vụ được giao. Tầm quan trọng của những vấn đề này quá rõ ràng đến nỗi việc củng cố và phát triển cơ cấu này là một thử nghiệm thú vị trong việc kiểm tra các điều kiện hành chính và tài chính thiết yếu. Do đó, sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi cho phép chúng tôi đánh giá tầm quan trọng của các hình thức phát triển. Những cân nhắc về mặt tư tưởng ở cấp độ cao hơn, cũng như phạm vi và địa điểm đào tạo nhân sự, đảm bảo rằng có nhiều chuyên gia tham gia vào việc hình thành các vị trí mà những người tham gia đảm nhận liên quan đến các nhiệm vụ được giao.

tự động

Các đồng chí! Sự khởi đầu của công việc hình thành lập trường hàng ngày đóng vai trò quan trọng trong việc hình thành hệ thống có sự tham gia của quần chúng. Tầm quan trọng của những vấn đề này rõ ràng đến mức sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi đòi hỏi phải xác định và làm rõ các đề xuất mới. Vì vậy, việc củng cố và phát triển cấu trúc là một thử nghiệm thú vị trong việc thử nghiệm mô hình phát triển. Nhiệm vụ của tổ chức, đặc biệt là mô hình hoạt động tổ chức mới quyết định phần lớn đến việc xây dựng một hệ thống đào tạo nhân sự, đáp ứng nhu cầu cấp thiết.

phần thân (lề:0 0 0 0; phần đệm:0 0 60px 0; cỡ chữ:16px;) h2 (màu:#CC0033;) div ( width:200px; /* chiều rộng cố định */ chiều cao: 300px; /* cố định chiều cao */ đường viền:1px Solid #555; phần đệm:4px; float:trái) .VisibleDiv (tràn:hiển thị;) .HiddenDiv (tràn:ẩn;).ScrollDiv (tràn:scroll;) .AutoDiv ( tràn:tự động;)

Điều đáng chú ý là trong trường hợp cụ thể này, các khối có chiều cao và chiều rộng cố định nhất định. Điều này rất quan trọng, ví dụ: hãy xem xét tùy chọn khi chiều cao khối được đặt thành auto :

Chúng tôi thấy rằng văn bản được hiển thị chính xác bên trong khối trong mọi trường hợp, ngoại trừ một bất tiện nhỏ trong trường hợp cuộn, nơi xuất hiện các thanh cuộn không hoạt động.

Nhưng trong trường hợp này có một mối nguy hiểm nhỏ mà nhiều người gặp phải không hiểu tại sao nó lại phát sinh và cách khắc phục. Thực tế là nếu một khối có tràn: hiển thị; nghĩa là giá trị mặc định và nội dung của nó có các phần tử có bất kỳ giá trị float nào ngoại trừ không có giá trị nào, khi đó tất cả những điều này sẽ được hiển thị không chính xác. Để hiểu tình huống này là gì, hãy xem xét một ví dụ:

Trang

Bên dưới khối VisibleDiv là một khối khác

dễ thấy

Các đồng chí! Sự khởi đầu của công việc hình thành lập trường hàng ngày đóng vai trò quan trọng trong việc hình thành hệ thống có sự tham gia của quần chúng. Tầm quan trọng của những vấn đề này rõ ràng đến mức sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi đòi hỏi phải xác định và làm rõ các đề xuất mới. Vì vậy, việc củng cố và phát triển cấu trúc là một thử nghiệm thú vị trong việc thử nghiệm mô hình phát triển. Nhiệm vụ của tổ chức, đặc biệt là mô hình hoạt động tổ chức mới quyết định phần lớn đến việc xây dựng một hệ thống đào tạo nhân sự, đáp ứng nhu cầu cấp thiết.

Xuất hiện ngay sau div với tràn: hiển thị (giá trị mặc định)

Không có gì trong khối VisibleDiv

dễ thấy

Các đồng chí! Sự khởi đầu của công việc hình thành lập trường hàng ngày đóng vai trò quan trọng trong việc hình thành hệ thống có sự tham gia của quần chúng. Tầm quan trọng của những vấn đề này rõ ràng đến mức sự tăng trưởng liên tục về số lượng và phạm vi hoạt động của chúng tôi đòi hỏi phải xác định và làm rõ các đề xuất mới. Vì vậy, việc củng cố và phát triển cấu trúc là một thử nghiệm thú vị trong việc thử nghiệm mô hình phát triển. Nhiệm vụ của tổ chức, đặc biệt là mô hình hoạt động tổ chức mới quyết định phần lớn đến việc xây dựng một hệ thống đào tạo nhân sự, đáp ứng nhu cầu cấp thiết.

phần thân (lề:0 0 0 0; phần đệm:0 0 60px 0; cỡ chữ:16px;) h2 (màu:#CC0033;) p (float:left;) div ( width:500px; Height:auto; border: 1px đặc #555; phần đệm:4px; lề:4px;

Trong trường hợp đầu tiên, rõ ràng là nội dung có thuộc tính float di chuyển ra ngoài khối và không được tính đến khi xác định chiều cao của khối, trong trường hợp thứ hai, bên dưới khối có tràn: hiển thị ; Một khối khác được đặt đặc biệt và sơn màu khác. Không phải những ví dụ duy nhất cách các khối như vậy có thể hoạt động trên trang (với tràn : hiển thị ; và chiều cao : tự động ; ). Điều này có thể được sửa bằng cách thay thế giá trị hiển thị bằng giá trị ẩn; hãy nhớ rằng thuộc tính này chỉ nên được chỉ định cho các khối có chiều cao: auto; , nếu có chiều cao cố định thì có khả năng cao là nội dung sẽ bị ẩn nếu nó lớn hơn chiều cao được chỉ định.

Phiên bản đã sửa sẽ trông như thế này:

Ngoài ra, bạn sẽ không gặp vấn đề như vậy nếu khối có tràn: hiển thị ; và chiều cao: tự động; một số giá trị cũng được chỉ định thuộc tính nổi. Nói chung, trong nhiều trường hợp, việc hiển thị các phần tử phụ thuộc vào một tập hợp các thuộc tính hơn là vào các thuộc tính riêng lẻ.

Hãy giả sử như vậy. Bạn có thể tự mình tìm ra độ rộng và khả năng tương thích giữa nhiều trình duyệt. Bạn cũng có thể cuộn sang bên phải bằng cách chọn văn bản.

Nói chung, ẩn cuộn giấy là một ý tưởng tồi.

Html, nội dung ( tràn: ẩn; chiều cao: 100%; kích thước hộp: hộp viền; lề: 0; ) nội dung ( tràn-y: cuộn; chiều rộng: calc(100% + 20px); phần đệm: 8px; )

Xin chào. Có thể loại bỏ hoặc ẩn nó trên trang web? phương pháp css hoặc javascript di chuyển theo chiều dọc, nhưng để thao tác cuộn hoạt động như bình thường? Ví dụ: bạn có thể áp dụng tràn-y:ẩn cho nội dung, nhưng tự nhiên thao tác cuộn sẽ ngừng hoạt động.

Xin chào. Có thể xóa, ẩn trên trang web bằng css hoặc javascript dọc cuộn, nhưng để cuộn hoạt động như bình thường? Ví dụ: bạn có thể áp dụng tràn-y:ẩn cho nội dung, nhưng tự nhiên thao tác cuộn sẽ ngừng hoạt động.

Xin chào. Có thể xóa hoặc ẩn tính năng cuộn dọc trên trang web bằng phương pháp CSS hoặc javascript nhưng tính năng cuộn vẫn hoạt động như bình thường không? Ví dụ: bạn có thể áp dụng tràn-y:ẩn cho nội dung, nhưng tự nhiên thao tác cuộn sẽ ngừng hoạt động.

Tùy chọn không có calc sử dụng định vị cố định. Giải quyết vấn đề cuộn ngang khi chọn.

Html ( tràn: ẩn; ) nội dung ( vị trí: cố định; trái: 0; trên cùng: 0; phải: -30px; dưới cùng: 0; đệm: 8px; tràn-y: cuộn; )

Một lựa chọn khác cho crom:

::-webkit-thanh cuộn ( chiều rộng: 0; )

Nói chung, ẩn cuộn giấy là một ý tưởng tồi.

Html, nội dung ( tràn: ẩn; chiều cao: 100%; kích thước hộp: hộp viền; lề: 0; ) nội dung ( tràn-y: cuộn; chiều rộng: calc(100% + 20px); phần đệm: 8px; )

Tùy chọn không có calc sử dụng định vị cố định. Giải quyết vấn đề cuộn ngang khi chọn.

Html ( tràn: ẩn; ) nội dung ( vị trí: cố định; trái: 0; trên cùng: 0; phải: -30px; dưới cùng: 0; đệm: 8px; tràn-y: cuộn; )

Một lựa chọn khác cho crom:

::-webkit-thanh cuộn ( chiều rộng: 0; )