Cuộn ngang đang trở thành mốt. Hãy tìm ra nó. Cuộn ngang trong CSS thuần túy
Từ tác giả: bài viết của khách của chúng tôi, Peter Businessmans. Peter - nhà phát triển front-end trên trang Khán giả, nơi anh ấy thích phong cách viết trong SCSS. Hôm nay anh ấy sẽ cho chúng ta thấy cái mà tôi gọi là thủ thuật CSS trung thực. Toàn bộ trang web là theo chiều dọc. Bạn đọc trang này giống như một cuốn sách thông thường: từ trái sang phải, từ trên xuống dưới. Nhưng đôi khi bạn muốn thoát khỏi tính thẳng đứng và làm điều gì đó điên rồ: tạo danh sách ngang. Hoặc thậm chí điên rồ hơn, một trang web nằm ngang!
Sẽ thật tuyệt nếu chúng ta có thể làm điều gì đó như thế này:
/* mã giả */ div ( hướng cuộn: ngang; )
/*mã giả*/ div( cuộn - hướng : ngang ; |
Thật không may, điều này sẽ không xảy ra. Điều này thậm chí không được lên kế hoạch trong CSS.
Điều này thật tệ vì công ty tôi làm việc sẽ thực sự sử dụng nó. Chúng tôi thực hiện rất nhiều bài thuyết trình, và bài thuyết trình là một công việc khá theo chiều ngang. Thông thường, tỷ lệ khung hình của các slide là 4:3 hoặc 16:9. Vì điều này chúng ta có vấn đề liên tục với các slide ngang và công nghệ web dọc. Khi nói “chúng tôi”, ý tôi là tôi. Nhưng điều tôi yêu thích là những thử thách.
Một trường hợp sử dụng khác
Tôi chợt nảy ra một phương pháp ứng dụng cụ thể. Ý tưởng là sẽ thuận tiện cho khách hàng xem tất cả sản phẩm trên một slide. Đương nhiên, danh mục sản phẩm sẽ không phù hợp ở một dạng. Vì vậy, chúng tôi quyết định chia danh mục thành ba danh mục, mỗi danh mục có cuộn ngang. Do đó, ba sản phẩm phổ biến nhất sẽ hiển thị trong mỗi danh mục và các sản phẩm ít quan trọng hơn sẽ được mở dễ dàng truy cập.
Phương pháp không có JavaScript
Tất cả chúng ta đều biết rằng có nhiều cách để cuộn ngang trong JS. Có một số ví dụ về CSS-Tricks. Tôi đang tự hỏi liệu ý tưởng này có thể được thực hiện trên CSS thuần túy. Giải pháp hóa ra rất đơn giản:
tạo một thùng chứa các phần tử;
xoay thùng chứa 90 độ ngược chiều kim đồng hồ sao cho cạnh dưới ở bên phải;
Chúng tôi xoay các phần tử bên trong vùng chứa trở lại vị trí của chúng.
Bước 1) tạo vùng chứa
Tạo một div có nhiều phần tử con.
Trong ví dụ của chúng tôi, vùng chứa có thể cuộn sẽ rộng 300px và sẽ có 8 phần tử 100x100px. Kích thước tùy ý, bạn có thể đặt bất kỳ kích thước nào.
< div class = "hình vuông bao bọc cuộn ngang"> < div >Mục 1< / div > < div >mục 2< / div > < div >mục 3< / div > < div >mục 4< / div > < div >mục 5< / div > < div >mục 6< / div > < div >mục 7< / div > < div >mục 8< / div > < / div > |
Chiều cao của container sẽ trở thành chiều rộng và ngược lại. Bên dưới, "chiều rộng" của vùng chứa sẽ là 300px:
Trình bao bọc cuộn ngang ( chiều rộng: 100px; chiều cao: 300px; tràn-y: tự động; tràn-x: ẩn; )
chiều rộng: 100px; chiều cao: 300px; tràn - y : tự động ; tràn - x : ẩn ; |
Và các phần tử con:
Trình bao bọc cuộn ngang > div ( chiều rộng: 100px; chiều cao: 100px; )
Ngang - cuộn - trình bao bọc > div ( chiều rộng: 100px; chiều cao: 100px; |
Bước 2) xoay thùng chứa
Bây giờ bạn cần xoay thùng chứa -90 độ bằng cách sử dụng Thuộc tính CSS biến đổi. Chúng tôi có cuộn ngangờ.
Trình bao bọc cuộn ngang ( ... biến đổi: xoay (-90deg); nguồn gốc biến đổi: bên phải trên cùng; }
Ngang - cuộn - bao bọc ( . . . biến đổi: xoay (-90deg); |
Chỉ có một vấn đề nhỏ: các phần tử con đã xoay cùng với vùng chứa.
Bước 3) trả các phần tử con về vị trí của chúng
Vậy làm thế nào để bạn trả lại các phần tử về vị trí của chúng? Quay lại khi Trợ giúp CSS biến đổi thuộc tính
Trình bao bọc cuộn ngang > div ( ... biến đổi: xoay (90deg); nguồn gốc biến đổi: trên cùng bên phải; )
Ngang - cuộn - trình bao bọc > div ( . . . biến đổi: xoay (90deg); biến đổi - nguồn gốc: trên cùng bên phải; |
Bước 4) Định vị cố định
Mọi thứ có vẻ tốt, nhưng có một vài vấn đề.
Chúng tôi đã xoay vùng chứa và đặt góc trên bên phải làm điểm neo, vì điều này phía tay trái chuyển sang chiều rộng của container. Nếu bạn khó tưởng tượng thì chỉ cần đặt ngón tay bên phải góc trên cùng trang và lật nó. Thoát: bạn cần bật lại bằng thuộc tính dịch.
Đã tốt hơn rồi. Nhưng phần tử đầu tiên vẫn không hiển thị vì vấn đề tương tự cũng xảy ra với các phần tử con. Điều này có thể được khắc phục bằng cách đặt lề trên cho phần tử con đầu tiên bằng giá trị chiều rộng của nó hoặc bằng cách chuyển đổi tất cả các phần tử giống như một vùng chứa. Cách dễ nhất mà tôi tìm thấy là thêm phần đệm trên cùng vào vùng chứa bằng chiều rộng của các phần tử con, từ đó tạo vùng đệm cho các phần tử.
Khả năng tương thích
Tôi đã kiểm tra tính tương thích trên các thiết bị có sẵn cho tôi.
Máy tính để bàn
Vì kiểu dáng thanh cuộn hiện chỉ hoạt động trong trình duyệt Webkit/Blink nên thanh cuộn màu xám thông thường được hiển thị trong Firefox và IE. Điều này có thể được sửa bằng cách sử dụng JS và ẩn chúng hoàn toàn, nhưng đây là chủ đề cho một bài học khác.
Cuộn bằng bánh xe chuột hoạt động tốt trên máy tính để bàn. Nhưng máy tính xách tay của tôi có ý kiến riêng về vấn đề này. Trên các thiết bị có màn hình cảm ứng và bàn di chuột, bản demo hoạt động như thể div chưa hề được xoay.
Thiêt bị di động
Tôi rất ngạc nhiên khi biết rằng Android nhận ra vùng chứa đã được xoay và cho phép bạn cuộn bằng cách vuốt sang trái và phải.
Ngược lại, với iOS, mọi thứ không được suôn sẻ như vậy. Trình duyệt hoạt động như thể vùng chứa không hề được xoay. Do đó, để cuộn bạn cần phải vuốt lên xuống, điều này khá lạ. Tràn: ẩn không giải quyết được vấn đề.
Phần kết luận
Theo trang web Tôi có thể sử dụng không, các chuyển đổi trong CSS hiện được hơn 93% người dùng hỗ trợ (tại thời điểm viết bài, tháng 11 năm 2016). Không nên có vấn đề gì ở đây.
Mặc dù tốt hơn là không sử dụng phương pháp này trong sản xuất. Tôi đã thử nghiệm nó trên một số thiết bị, nhưng không phải trên tất cả và không quá kỹ lưỡng.
nhất một vấn đề lớn– chạm vào đầu vào, để sang trái và phải, bạn cần vuốt lên và xuống. Một giải pháp có thể là viết một tin nhắn trên trang web kèm theo lời giải thích, nhưng sau đó bạn sẽ phải dựa vào người dùng để đọc nó. Và thậm chí sau đó nó sẽ trái với lẽ thường. Một giải pháp khác là ghi lại các đầu vào cảm ứng bằng cách sử dụng JS trên thiết bị, nhưng tốt hơn hết là viết mọi thứ bằng JS và từ bỏ hoàn toàn việc hack CSS của chúng tôi.
3. Buộc cuộn dọc và ngang trong khối CSS
4. Ví dụ về khối div có chức năng cuộn
Trong bài viết này chúng ta sẽ xem xét vấn đề tạo một khối (div) có kích thước cố định với khả năng cuộn theo chiều ngang và chiều dọc. Điều này có thể được thực hiện sử dụng CSS. Chịu trách nhiệm về việc này thuộc tính tràn.
Giới thiệu về thuộc tính tràn hữu ích
Tài sản tràn ra chịu trách nhiệm hiển thị nội dung của một phần tử khối. Có thể được sử dụng khi nội dung không vừa hoàn toàn và vượt ra ngoài khu vực khối.tràn-x- chịu trách nhiệm hiển thị nội dung của phần tử khối theo chiều ngang.
tràn-y- chịu trách nhiệm hiển thị nội dung của phần tử khối theo chiều dọc.
Mã CSS
Prokrutka (
tràn: tự động; /* Thuộc tính cuộn ngang. Tự động, nếu nội dung thêm khối */
}
tràn thuộc tính và giá trị
dễ thấy- toàn bộ nội dung của phần tử được hiển thị, thậm chí nằm ngoài chiều rộng đã đặt.ẩn giấu- chỉ hiển thị vùng bên trong phần tử, phần còn lại bị ẩn.
cuộn- thêm mạnh mẽ thanh cuộn ngang (y) hoặc ngang (x).
tự động- tự động thêm sọc ngang cuộn nếu khối nhỏ hơn.
Hãy xem xét một ví dụ về một lớp CSS. Về chiều rộng và chiều cao, chúng tôi đặt chiều rộng và chiều cao của khối mà chúng tôi cần (nội dung của khối sẽ không vượt quá chúng) và với thuộc tính tràn: auto; đặt cuộn ngang nếu cần
Mã CSS
Prokrutka (
chiều rộng: 150px; /* chiều rộng của khối của chúng tôi */
chiều cao: 100px; /* chiều cao của khối của chúng tôi */
tràn: tự động; /* Thuộc tính cuộn ngang. Tự động, nếu có nhiều hơn một khối */
}
Buộc cuộn trong khối CSS
Bạn cũng có thể buộc cuộn để vừa với chiều cao và chiều rộng. Đối với điều này, mỗi trục: tràn-y: cuộn; (theo chiều dọc) tràn-x: cuộn; (ngang) chỉ định tham số cuộn, buộc cuộn.Mã HTML và CSS
Prokrutka (
chiều cao: 150px; /* chiều cao của khối của chúng tôi */
nền: #fff; /*màu nền,màu trắng*/
đường viền: 1px liền khối #C1C1C1; /* Kích thước và màu sắc của đường viền khối */
}
Ví dụ về div cuộn
Mã HTML và CSS
Và có rất nhiều, rất nhiều văn bản khác nhau và các thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác. Và có rất nhiều văn bản khác nhau và thông tin khác.
Một trong những tài sản tràn ra có thể gỡ bỏ thì sẽ chỉ cuộn dọc theo một trục là khá đủ.
Xem kịch bản đang hoạt động Ví dụ dưới.
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 phần 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):
- Visible - Toàn bộ nội dung của phần tử được hiển thị, kể cả ở bên ngoài đặt chiều cao và chiều rộng.
- Ẩ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 đẩy 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
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 người mẫu 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.
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.
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 */ border:1px Solid #555; đệm:4px; lề: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ụ:
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.
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; đệm:4px; lề:4px; ) .VisibleDiv (tràn:hiển thị;nền: rgba(0,255,0,0.1);) .ignor (nền: rgba(0,255,0,0.6); màu:# FFFFFF;font-weight:bold;)
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ẻ.
Bạn có thể sử dụng tràn-y: cuộn để cuộn dọc.
- Dịch
TRONG Gần đây Cách tiếp cận thiết kế trang web bằng cách cuộn ngang ngày càng trở nên phổ biến. Chúng tôi rất quan tâm đến tính khả thi và khả năng sử dụng cách tiếp cận này. Để hiểu rõ vấn đề này, chúng tôi đã dịch một bài viết dành riêng cho việc cuộn ngang. Chúng tôi mời bạn đọc tài liệu và thảo luận về chủ đề này trong phần bình luận...
Tiêu đề xuất bản gốc: “Khiếu nại chống cuộn ngang”…
Thỉnh thoảng mọi thứ đều được suy nghĩ lại. Vì vậy không có gì đáng ngạc nhiên khi các trang web có sắp xếp theo chiều ngang nội dung đang trở thành thời trang. Đây là một sự đổi mới thiết kế táo bạo và ấn tượng, vì phần lớn các trang web trên Internet ngày nay đều sử dụng tính năng cuộn dọc.
Lý do cho sự phổ biến của phương pháp di chuyển theo chiều dọc hiển nhiên - nó dễ thực hiện hơn, quen thuộc hơn và được sử dụng thường xuyên hơn. Các trang web cuộn dọc cũng được coi là hiệu quả hơn. Vì đây là ý kiến của số đông nên việc sử dụng cuộn ngang càng trở nên lệch lạc và táo bạo hơn.
Những người đã chọn “đường dẫn” cuộn ngang lý do từ vị trí mình tự chọn. Và các tổ chức ưu tiên phương pháp này, tuyên bố trang web của họ là tác phẩm nghệ thuật.
(http://www.guillaumejuvenet.com/)
Các trang web theo chiều ngang là sự thể hiện tính độc đáo của một người và sự không sẵn sàng phù hợp với khuôn khổ xã hội. Kết quả là, một thương hiệu sử dụng kiểu thiết kế trang web này thường nổi tiếng là "kỳ quặc" và "nhanh nhẹn".
Tại sao một số người sử dụng cuộn ngang?
Vì việc cuộn lên xuống các trang web đã trở thành một quy tắc bất thành văn nên nhiều người thậm chí sẽ không nghĩ rằng nó có thể làm theo cách nào khác. Chuột máy tính bằng con lăn, cuộn trong bàn di chuột trên máy tính xách tay - càng củng cố thêm ý tưởng này. Các trang web sử dụng tính năng cuộn ngang rõ ràng đã coi thường các tiêu chuẩn của các trang web tiêu chuẩn bằng cách khẳng định cá tính riêng của chúng.Đặt cược trên thiết bị di động có thể không phải là một ý tưởng hay
Cuộn ngang trên điện thoại thông minh và máy tính bảng không còn mới và được sử dụng khá rộng rãi do tính đơn giản của nó. Việc sử dụng nó trên một số nhiều thiết bị khác nhau, thường được cho là nhờ cách trình bày nội dung nhất quán hơn. Mặt khác, cuộn ngang ít phổ biến hơn trên máy tính để bàn.Lý do chính cho việc này đã được nêu ở trên. Mọi người không biết rằng bạn có thể xem nội dung bằng cách cuộn theo cách khác.
Bởi vì màn hình điện thoại di động hoặc máy tính bảng và màn hình máy tính để bàn được coi là khá cụ thể với nhau, sự tương đồng không áp dụng ở đây. Bạn không thể sử dụng cuộn ngang trên máy tính desktop, đơn giản vì nó phổ biến trên máy tính bảng và điện thoại.
Nguyên tắc cơ bản ở đây là mọi người sử dụng những thiết bị này với những suy nghĩ khác nhau và việc thay đổi trạng thái được chấp nhận của mọi thứ có thể dẫn đến một số hiểu lầm, khiến người dùng rời khỏi vùng an toàn của họ.
Hạn chế chính trong việc triển khai cuộn ngang là người dùng thích tính đồng nhất trong giao diện web hơn là cơ chế duy nhất để xem nội dung trên một trang.
Sử dụng hiệu quả không gian dọc cho khu vực nội dung
Trong bố cục dọc, tất cả nội dung, bất kể tầm quan trọng của nó, đều nối tiếp nhau. Thông tin chính chỉ có thể được làm nổi bật bằng thiết kế chứ không thể định vị trên trang. Điều duy nhất một nhà thiết kế có thể làm là đặt Thông tin mấu chốtở đầu trang.Không giống như các bố cục theo chiều dọc phổ biến, bố cục theo chiều ngang có một lợi thế. Họ cẩn thận chỉ cung cấp Một phần nhỏ thông tin trong vùng cuộn ngang. Và thông tin chính có thể được cố định theo chiều dọc, thu hút sự chú ý của người dùng không chỉ bằng thiết kế mà còn bằng cách định vị.
Khi nào bạn nên sử dụng cuộn ngang nếu bạn thực sự muốn nó?
(http://qandhlondon.com/)
Các trang web có bố cục nội dung theo chiều ngang phù hợp nhất với các tình huống cần hiển thị nhiều đối tượng cùng một lúc: Hình ảnh đồ hoạ, các khối thông tin nhỏ, nhóm biểu tượng hoặc bản xem trước liên kết đến nhiều thông tin hơn miêu tả cụ thể.
Phiên bản di động các trang web “máy tính để bàn” hoặc các trang web được thiết kế để xem từ thiêt bị di động- đây là lĩnh vực ứng dụng mà tính năng cuộn ngang hoàn toàn thích hợp. Tuy nhiên, nó cũng hoạt động tốt với một số trang web khác, cho phép chúng hiển thị một số lượng lớn thông tin một cách đơn giản và có lợi nhuận.
Vấn đề về khả năng sử dụng
(http://movingislands.com/en)
Mặc dù nhiều người dùng ngày nay đã quen và thậm chí quen với việc cuộn ngang (khi toàn bộ nội dung của trang thay đổi), nhưng việc cuộn ngang (tải nội dung mượt mà) vẫn bị nhiều người lên án. Cô ấy tiếp tục nhận được đánh giá tiêu cực từ nhiều người dùng và do đó nên thận trọng khi sử dụng. Nó thường được sử dụng để thể hiện cá tính, ví dụ như để tuyên bố Nhãn hiệu. Nhưng ngay cả với công dụng này, nhiều người vẫn chưa quen với nó.
Người dùng bỏ qua các khối trang web cuộn ngang
Một trong những phản ứng chính mà việc cuộn ngang gây ra là bỏ qua các phần có nó. Vì điều này kích thích người dùng rời khỏi vùng an toàn của mình.Mọi người có xu hướng không nhận thấy ngay cả những tín hiệu rõ ràng về điều hướng trang web cuộn theo chiều ngang, thường để lại các mũi tên lớn và các yếu tố khác điều hướng ngang không được chú ý và không bị ảnh hưởng.
(http://www.lorenzobocchi.com/)
Điều này chủ yếu là do hình thức sử dụng này không phù hợp với mô hình hoạt động dự kiến và kết quả là không được chấp nhận hoặc không có ý nghĩa.
Thông thường, các trang web có lượt lật trang đầy đủ (tương tự như sách và tạp chí giấy) tạo ra kỳ vọng cao cho người dùng, nhưng sau đó, mọi người thường cảm thấy thất vọng với nội dung được cung cấp. Vì vậy, một giải pháp tốt cho một người (sách và tạp chí giấy) có thể gây bất lợi cho người khác.
Cái nào đúng?
(http://www.themobileplaybook.com/en-us/#/overview)
Phải làm gì nếu bạn vẫn muốn thực hiện cuộn ngang trên trang web của mình và không mất người dùng? Nó thực sự đơn giản - thêm Tính năng bổ sung dẫn đường.
Thêm một menu vào cơ chế cuộn ngang cho phép bạn không chỉ di chuyển từ phần này sang phần tiếp theo mà còn có thể bỏ qua hoàn toàn một số phần. Nó sẽ mang lại sự linh hoạt và khuyến khích số lượng lớn người dùng duyệt các phần mà họ quan tâm.
Thanh cuộn ngang cũng là thứ bắt buộc phải có để hiển thị lượng nội dung chưa được xem. Đôi khi điều này thúc đẩy mọi người đọc thêm một chút khi họ chuẩn bị rời khỏi trang web.
Những gì cần xem xét
(http://www.richard-hill.org.uk/)
Mặc dù thái độ đối với việc sử dụng cuộn ngang đang dần thay đổi với sự ra đời của các công nghệ mới như những màn hình cảm ứng, máy tính bảng, PC đa năng có màn hình cảm ứng, v.v., phương pháp này vẫn chưa chiếm ưu thế.
Trên bàn phím analog, việc thao tác với phím lên/xuống dễ dàng hơn so với phím phải/trái. Nhưng trên bàn di chuột, việc thêm các cử chỉ mới sẽ thuận tiện hơn khi thực hiện cuộn ngang.
Tốc độ cuộn cũng cần được tối ưu hóa. Cuộn quá nhanh có thể gây đau đầu và cuộn quá chậm có thể rất khó chịu.
Mặc dù chúng ta đã quen với việc đọc từ trái sang phải, từ từ cuộn trang xuống, nhưng giờ đây thói quen này đang thay đổi. Với sự xuất hiện sách điện tử Và Các ứng dụng khác nhauĐối với điện thoại thông minh, máy tính bảng và bàn di chuột, mọi người đang dần quen với việc lật khi đọc. Tuy nhiên, điều quan trọng là phải tính đến những gì người dùng có thể gặp phải khi đưa các khái niệm mới vào cuộc sống hàng ngày.
