Làm cách nào để cho phép đối tượng DOM như div có thể cuộn bằng bánh xe cuộn trên chuột hoặc bằng các phím mũi tên (như overflow:scroll
), nhưng không hiển thị thanh cuộn (như overflow:hidden
)?Có thể cuộn nhưng không có thanh cuộn
Trả lời
Bạn có thể đặt liên kết trình xử lý sự kiện thành cuộn xuống/cuộn lên (thông qua sự kiện mousewheel, xem event.wheelDelta đến kích thước calc và directino cuộn) và đặt vị trí div divuteley theo cách thủ công bên trong một chiều cao cố định khác . Vì vậy, khi cuộn xuống, bạn giảm vị trí y của div bên trong, và khi cuộn lên, bạn sẽ tăng vị trí y.
Đối với các phím mũi tên, chỉ cần liên kết một chức năng tương tự với tính năng kiểm tra sự kiện phím tắt cho mũi tên xuống/lên khi thích hợp.
tôi đã thực hiện một jsfiddle exampling kỹ thuật này ở đây: http://jsfiddle.net/wsmithrill/U7ju8/32/
Tuyệt vời. Cảm ơn. – sawa
Nếu bạn muốn bỏ qua javascript hoàn toàn, bạn có thể thử những gì tôi đề nghị here.
Về cơ bản, có div vùng chứa hơi hẹp hơn div nội dung của bạn. Đặt bộ chứa thành tràn: ẩn, nhưng div nội dung được đặt thành tràn: cuộn. Nếu vùng chứa hẹp hơn, nó sẽ ẩn thanh cuộn.
Xảo quyệt. Tôi thích nó. – SpaceBeers
Vui vì bạn thích nó! Thật không may, nó là khủng khiếp từ một điểm đứng khả năng sử dụng - làm thế nào là một người sử dụng phải biết có nhiều nội dung ra khỏi trang web? – chipcullen
Đúng nhưng tôi có một sự tôn trọng lành mạnh đối với các mẹo nhỏ như thế này ... – SpaceBeers
nếu có thể cần điều này để ngăn chặn di chuyển xuống khi bạn đạt tới đỉnh:
var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
$("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");
}
- 1. CSS - không có thanh cuộn trong ipad
- 2. Tôi có thể tắt âm thanh cuộn UIPickerView không?
- 3. Ẩn thanh cuộn có tràn: cuộn được bật
- 4. Tôi có thể hiển thị thanh cuộn trên iPad ngay cả khi tôi không cuộn?
- 5. Tắt tính năng cuộn của cơ thể nhưng giữ thanh cuộn
- 6. Thanh cuộn ListViewPhong cách có lề/đệm
- 7. Sự kiện thanh cuộn khi cuộn?
- 8. Twitter bootstrap - Bố cục cố định với thanh cuộn có thể cuộn
- 9. Có thể tắt cuộn trên listView không?
- 10. Cách cuộn bố cục có thể cuộn trong Android Studio?
- 11. Ẩn thanh cuộn nhưng giữ khả năng cuộn với cảm giác tự nhiên
- 12. CSS 100% chiều rộng nhưng tránh thanh cuộn
- 13. iPad tắt tính năng cuộn tài liệu nhưng không xóa cuộn cuộn div
- 14. jqGrid thanh cuộn dọc
- 15. Thanh cuộn Textarea
- 16. Xóa thanh cuộn như tràn ẩn nhưng cần hiển thị
- 17. Thêm JTextArea có thể cuộn (Java)
- 18. Animate.CSS Thêm Thanh cuộn?
- 19. jqGrid thanh cuộn ngang
- 20. Bootstrap 3: Thanh cuộn
- 21. QT4: Có thể thực hiện cuộn QListView mượt mà không?
- 22. thanh cuộn trong JTextArea
- 23. Cách tạo cuộn div cuộn có thể cuộn khi nhấp và di chuột qua jQuery
- 24. Bootstrap: Cách bật thanh cuộn?
- 25. ItemsControl thiếu thanh cuộn dọc
- 26. Ẩn thanh cuộn Trong DataGridView
- 27. Cách chỉ có một thanh cuộn dọc trên div
- 28. ẩn thanh cuộn scrollview android
- 29. thanh cuộn ngang cho ul
- 30. Cách tạo QVBoxLayout có thể cuộn?
Tại sao điều này downvoted? – sawa
Tôi không biết - sẽ upvote nó để bù đắp;) –