Thay đổi cuộn của một div ẩn

Question

Tôi có một div ẩn với chiều cao cố định và một thanh cuộn. Tôi muốn thay đổi vị trí cuộn, nhưng trình duyệt sẽ không le tôi làm điều đó, như div được ẩn. Thuộc tính scrollTop sẽ dính vào 0.

Ngoài ra, tôi không muốn hiển thị và ẩn div trở lại, gây nhấp nháy.

Nếu có ai biết cách thực hiện, nó sẽ thực sự hữu ích.

Cảm ơn!

Answer 1

Câu hỏi của tôi chưa hoàn thành. Div không phải là ẩn của riêng mình. Đó là một phần của một div container, được ẩn. Div bên trong hiển thị với cha mẹ của mình.

<div class="container hidden"> 
    <div id="some_div">Content</div> 
    <div id="my_div">I wanted to scroll this one</div> 
    <div id="other_div">Content</div> 
</div> 

Chúng tôi sử dụng jQuery đã đưa ra sự kiện "onShow" tùy chỉnh.

Vì vậy, bây giờ chúng tôi có thể làm điều này:

$('#my_div').bind('show', function() { 
    handle_scrollTopOffset(); 
}); 

Khi sự kiện cho thấy bị ràng buộc, nó bổ sung thêm lớp .onShow để div. Và chức năng jQuery.fn.show() đã bị ghi đè để kích hoạt sự kiện 'hiển thị' trên các trẻ em có lớp học .onShow.

Cảm ơn mọi người vì đề xuất của họ. Tôi xin lỗi tôi đã cung cấp một câu hỏi chưa hoàn chỉnh. Tôi sẽ cung cấp tất cả các chi tiết tiếp theo thời gian.

Answer 2

Để ngăn chặn div nhấp nháy và sửa chữa <div> không có sẵn cho các kịch bản bạn có thể sử dụng vị trí ẩn thay vì "display: none;":

.hidden { 
    position: absolute !important; 
    left: -9999px !important; 
    top: -9999px !important; 
} 

Answer 3

Bạn có thể lưu các cuộn sử dụng chức năng dữ liệu của jQuery.

function SaveScroll(val) 
{ 
    $(the_element).data("Scroll", val); 
} 

function Show() 
{ 
    var element = $(the_element); 

    // prevent from showing while scrolling 
    element.css 
    ({ 
     position: "absolute", 
     top: "-50000px", 
     left: "-50000px", 
     display: "" 
    }); 

    // Scroll to the position set when it was hidden 
    element.scrollTop(element.data("Scroll")); 

    // show the element 
    element.css 
    ({ 
     position: "", 
     top: "", 
     left: "" 
    }); 
} 

Điều này có thể làm các trick

---

Bạn có lẽ chỉ có thể sử dụng visibility: hidden thay vì display: none. Khả năng hiển thị giữ nguyên tố của nó. Tôi tin rằng nó chính xác giống như opacity: 0, nhưng nó là một giải pháp đa trình duyệt.