Tạo hộp cuộn cho đối tượng và ẩn thanh cuộn bằng css

Khi một đối tượng quá dài hoặc quá to ta có thể dùng một khung kích thước cố định và dùng thuộc tính overflow: scroll để ẩn phần thừa và cuộn xem tiếp. Tuy nhiên thanh cuộn sẽ làm mất thẩm mỹ, đặc biệt là khi hộp cuộn có kích thước nhỏ thì thanh cuộn sẽ rất xấu. Trường hợp này ta có thể ẩn thanh cuộn đi mà vẫn giữ chức năng cuộn.

Để ẩn thanh cuộn của trình duyệt thì sử dụng code sau:

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Như vậy, code css đầy đủ sẽ có dạng:

.hopcuon {max-width:40%; height:100px; overflow: scroll;-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */}
	.hopcuon :-webkit-scrollbar {
		display: none}	
}