đơn vị tăng trong khu vực cuộn/divs trong javascript?

Question

trong javascript tôi có thể đảm bảo rằng div lớn cuộn của mình theo chiều dọc chỉ theo khối (giả sử) 16 pixel

Trong java, chúng được gọi là 'đơn vị gia tăng'.

Tôi không thể tìm thấy bất kỳ điều gì tương tự trong javascript: Tôi muốn đảm bảo rằng một khu vực nhất định (div) khi được cuộn một phần luôn là bội số của 16 chế độ xem.

Điều đó cho phép tôi thực hiện các thủ thuật với hình nền và các hình ảnh khác.

cảm ơn

Answer 1

var lastScroll = 0; 
$('div').scroll(function(){ 
    var el = $(this), 
     scroll = el.scrollTop(), 
     round = lastScroll < scroll ? Math.ceil : Math.floor; 
    lastScroll = round(scroll/16) * 16; 
    el.scrollTop(lastScroll); 
}); 

http://jsfiddle.net/m9DQR/2/

Đảm bảo cuộn được thực hiện trong bội số của 16 pixel. Bạn có thể dễ dàng mở rộng này để trở thành một plugin cho phép cho một số tiền biến (không phải là một cố định, phép thuật 16).

Answer 2

Có, điều này có thể, nhưng nó sẽ yêu cầu sử dụng javascript để nắm bắt sự kiện cuộn và sau đó điều khiển nó. Kịch bản này (xin lỗi jQuery là những gì tôi có) và ghi đè sự kiện cuộn. Sau đó nó thay thế nó bằng chính xác khoảng cách di chuyển. Bạn có thể thực hiện toán học của riêng bạn để điều chỉnh giá trị của scrollTo. Chúng ta phải kiểm tra cả hai sự kiện chuột và DOMMouseScroll vì sự kiện đầu tiên không được FF hỗ trợ. Điều này dường như không áp dụng trong trường hợp của bạn, nhưng một người dùng có thể có số lượng các dòng để cuộn thiết lập để một cái gì đó khác hơn là mặc định ba. Vì vậy, câu lệnh if tính toán khoảng cách. Tôi để lại nó ở đó mặc dù trong trường hợp những người khác vấp ngã về câu hỏi này và điều quan trọng là họ mặc dù.

$('body').bind('mousewheel DOMMouseScroll', function(e) { 
    var scrollTo = null; 
    if (e.type == 'mousewheel') { 
    scrollTo = (e.wheelDelta * -1); 
    } 
    else if (e.type == 'DOMMouseScroll') { 
    scrollTo = 40 * e.detail; 
    } 
    //adjust value of scrollTo here if you like. 
    scrollTo = 16; 
    if (scrollTo) { 
    e.preventDefault(); 
    $(this).scrollTop(scrollTo + $(this).scrollTop()); 
    } 
}); 

Answer 3

Đến từ một ngôn ngữ lập trình khác, tôi cũng thấy JavaScript khó khi xử lý giao diện người dùng. Trong trường hợp của bạn, tôi sẽ chỉ thiết lập một handler cho sự kiện onscroll và truy vấn vị trí của div liên quan đến vị trí cuộn. Trả về false bất cứ khi nào vị trí của div không chia hết cho 16px và tạo một bộ đếm để cho phép định vị lại sau khi 16px khác được cuộn.