DIV tự động cuộn

Question

Tôi có một div có số lượng lớn các mục trong đó. Tôi chọn các mục này một cách linh động bằng cách nhấp vào một nút, tràn tự động trong trường hợp của tôi. Điều tôi muốn là khi một mục không hiển thị được chọn để cuộn div để có thể nhìn thấy được. Tôi có thể làm cái này như thế nào?

Answer 1

Bạn có thể sử dụng scrollTop tài sản của phần tử html để thiết lập số lượng nội dung của nó được cuộn bằng.

Và bạn có thể nhận số tiền bạn cần để cuộn theo số offsetTop của phần tử mà bạn muốn cuộn.

Ví dụ với HTML này:

<div id="container"> 
    <p id="item-1">foo</p> 
    <p id="item-2">bar</p> 
    <p id="item-3">baz</p> 
</div> 

Bạn có thể sử dụng JavaScript này để di chuyển div container để đoạn thứ ba:

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop; 

Answer 2

Khi nút của bạn được nhấp và một mục được chọn, hãy gọi phương thức focus() của mục đã chọn này. điều này sẽ gây ô tô di chuyển đến phần tử của bạn:

<div style="height:80px; overflow:auto;"> 
    <input type="text" id="id1"><br><br> 
    <input type="text" id="id2"><br><br> 
    <input type="text" id="id3"><br><br> 
    <input type="text" id="id4"><br><br> 
    <input type="text" id="id5"><br><br> 
    <input type="text" id="id6"><br><br> 
</div> 
<input type="button" onclick="document.getElementById('id6').focus();"> 

Answer 3

Tuy nhiên, lựa chọn khác là sử dụng jQuery cùng với các plugin ScrollTo.

Answer 4

Bạn cũng có thể sử dụng thuộc tính scrollTop hoặc scrollLeft của DIV (tùy thuộc vào cuộn cuộn nằm ngang hay dọc).

Tôi đã thực hiện việc này trước và sử dụng sự kiện setTimeout để làm cho nó cuộn trôi chảy, thay vì trong 1 chuyển động. Điều này là không có JQuery tho.

Answer 5

Một tùy chọn khác ... neo.

Gán mỗi mục một ID duy nhất, và khi bạn muốn di chuyển đến một mục cụ thể, thực thi mã JavaScript sau:

location.hash = itemID; 

... nơi itemID là một biến có chứa ID của phần tử bạn muốn cuộn đến.

Steve