2012-02-13 40 views
15

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

+0

Tại sao điều này downvoted? – sawa

+1

Tôi không biết - sẽ upvote nó để bù đắp;) –

Trả lời

5

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/

+0

Tuyệt vời. Cảm ơn. – sawa

2

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.

+0

Xảo quyệt. Tôi thích nó. – SpaceBeers

+0

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

+1

Đú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

0

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"); 
} 
Các vấn đề liên quan