2012-01-10 44 views
7

này tương tự như SO: how to move a div with arrow keys, như vậy có lẽ một rõ ràng và thông báo 'không' cũng đủ như một câu trả lời:Scroll div với các phím mũi tên

Tôi có thể làm cho một tràn div một "mục tiêu cuộn mặc định" rằng phản ứng với mũi tên lên/down/page-down/space giống như tài liệu bị tràn (tức là cuộn xuống nội dung)? Bản thân trang không có thanh cuộn (ví dụ đơn giản dưới đây). Cụ thể, điều này có thể được thực hiện mà không theo dõi rõ ràng các sự kiện quan trọng (không trực tiếp hoặc cũng không được thư viện JS đặt)?

<html> 
<body> 
    <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll"> 
    <div id="innercontent" style="height:2000px;">foo</div> 
    </div> 
</body> 
</html> 

Edit: Tất nhiên các công trình trên sau khi tôi bấm vào div. Về cơ bản, tôi muốn tránh phải làm điều đó ...

+0

Bạn đã nghĩ đến việc chỉ đơn giản là [styling cuộn] (http://websitetips.com/articles/css/scrollbars/) của div và thực thi một số loại tập trung vào nó –

+0

có nhưng bạn vẫn cần tập trung phần tử div. Tại sao bạn không chỉ cần thử, tôi đã đi đến một trang web và chỉ cần nhấp vào div tràn, và sử dụng các phím, không có vấn đề ... nhưng một "tự động tập trung", bạn sẽ không thể thực hiện tôi nghĩ ... 7 – Luke

+0

I không quan tâm đến kiểu dáng. "Thực hiện một số loại tập trung" có thể là những gì tôi đang tìm kiếm ...;) Làm thế nào mà sẽ làm việc? – dcn

Trả lời

-1

Các trình duyệt thường đã hành vi này được xây dựng-in,

Để sử dụng các phím mũi tên để di chuyển xuống div của bạn, bạn phải có một yếu tố trong tập trung.

Lookup http://api.jquery.com/focus/

+3

Ngay cả sau khi thực hiện '.focus()' trên phần tử biểu mẫu trong div, Google Chrome không nhận dạng div làm mục tiêu của phím tắt cuộn phím mũi tên. –

9

Để cho một yếu tố html để có thể đặt tiêu điểm, nó phải có thể truy cập với phím Tab. Điều này có nghĩa là bạn có thể gọi số .focus() trên một liên kết hoặc một đầu vào. Ngoài ra, các yếu tố body luôn được chú trọng.

Bạn cần đặt div của bạn có thể truy cập bằng phím Tab. Bạn có thể thực hiện việc này bằng cách đặt thuộc tính tabindex trên đó. Nếu bạn không thực sự muốn mọi người có thể tab vào div đó, bạn có thể đặt tabindex thành -1, điều này sẽ ngăn mọi người thực sự tabbing vào nó nhưng sẽ thiết lập yếu tố cho tabbing và focus.

Nguồn: http://help.dottoro.com/ljpkdpxb.php

+1

Sau khi đảm bảo div có thuộc tính tabindex, và sau đó gọi div.focus(), nó hoạt động! Cảm ơn! – Josh

Các vấn đề liên quan