Hiển thị thanh cuộn tùy chỉnh với HTML/CSS/JavaScript

Question

Tôi đang tạo một ứng dụng chuyên môn cao mà tôi muốn thử nghiệm với thanh cuộn tùy chỉnh.

Lý tưởng nhất, tôi muốn vô hiệu hóa thanh cuộn tích hợp và vẽ thanh của riêng mình. Trang sẽ trông giống như bất kỳ trang nào khác, chỉ là thanh cuộn sẽ không hiển thị. Các phím mũi tên, bánh xe cuộn và bất kỳ ý nghĩa nào khác của việc cuộn trang, nên hoạt động như được loại trừ trên nền tảng mà ứng dụng web của tôi chạy trên đó.

Một cách để đặt nội dung trong div bao bọc được định vị hoàn toàn, với top: 0; bottom: 0; width: 100%; overflow: hidden; Với cách tiếp cận này, tôi sẽ phải tự triển khai cuộn lại bằng cách nghe các sự kiện bàn phím và bánh xe cuộn. Điều này là khó lý tưởng, đặc biệt là trang lên và hành vi trang xuống sẽ khó tái tạo. Tôi nên cuộn bao nhiêu điểm ảnh trên một trang? Số lượng thay đổi từ nền tảng đến nền tảng. Tôi tin rằng con chuột ma thuật "tăng tốc" cuộn sẽ khó để tái tạo là tốt.

Tùy chọn của tôi trong việc triển khai hiển thị thanh cuộn tùy chỉnh này là gì?

Lưu ý: Tôi biết nghiên cứu đã được thực hiện liên quan đến thanh cuộn tùy chỉnh và khả năng sử dụng. Bạn không cần phải chỉ ra điều này, tôi đau đớn nhận thức được điều này :) Tôi không nói về chỉ tái tô màu thanh cuộn. Hãy suy nghĩ về nó nhiều hơn trong điều khoản của một biên tập viên phim hoặc một sequencer âm nhạc. Nó rất tùy chỉnh và chuyên ngành.

Cập nhật:http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

Answer 1

Dưới đây là một giải pháp tiềm năng sử dụng javascript và css. Ý tưởng không phải là để loại bỏ các scrollbar nhưng chỉ đơn giản là ẩn nó thay vì và để cho nó tiếp tục làm công việc của nó.

Concept:

Đây scrollbar của nội dung thực tế được đẩy ra ngoài wrapper. Điều này ngăn không cho nó được nhìn thấy (wrapper có overflow:hidden;) nhưng không ngăn nó hoạt động.

 
|---------WRAPPER-----------| 
||--------CONTENT-----------|---| 
||       |[^]| 
||       |[0]| 
||       |[0]| 
||       |[ ]| 
||       |[ ]| 
||       |[v]| 
||--------------------------|---| 
|---------------------------| 

Thực hiện:

Các đánh dấu:

<div class="wrapper"> 
    <div class="content"> 
    <p>1Hello World</p> 
    <p>2Hello World</p> 
    ... 
    </div> 
</div> 

Và kịch bản (Tôi đã sử dụng jquery, nhưng nó có thể dễ dàng được viết lại trong javascript tinh khiết.):

$(function() { 
    // initialize: both need to have the same height and width (width default: 100%) 
    // these could go on your stylesheet of course. 
    $("div.wrapper").css({ height: "200px", overflow: "hidden" }); 
    $("div.content").css({ height: "200px", overflow: "auto" }); 

    // now extend the content width beyond the wrapper 
    $("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars 

    // prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars) 
    $("div.wrapper").scroll(function() { 
    this.scrollLeft = 0; 
    this.scrollTop = 0; 
    }); 

    $("div.content").scroll(function() { 
    // update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight 
    // alert("Place slider at " + ((100 * this.scrollTop)/this.clientHeight) + "%!"); 
    }); 
}); 

And here it is working (mặc dù tôi không có tùy chỉnh hiển thị thanh cuộn).

Answer 2

Tôi đoán vì đây là điều rất đặc biệt, không có nhu cầu để nói về khả năng sử dụng :-)

Điều duy nhất tôi biết là thực hiện sự kiện riêng của bạn capture - dựa trên keypress, mousedown, v.v. - sẽ dễ dàng để có được vị trí hiện tại của trang (loại ảo - bởi vì bạn sẽ có mọi thứ được tải và chỉ thay đổi "viewport" tùy chỉnh).

tôi khuyên bạn nên kiểm tra hướng dẫn Quirksmode tuyệt vời và tài liệu:

• sự kiện nhấn phím: http://www.quirksmode.org/js/keys.html

• Chuột sự kiện: http://www.quirksmode.org/js/events_mouse.html

Tôi không chắc chắn về di chuyển bánh xe, mặc dù - Tôi chưa từng nghe về kỹ thuật để mô phỏng điều đó, nhưng chắc chắn bạn sẽ có thể tìm thấy hoặc viết mã gì đó.

EDIT: Tôi đã tìm thấy một số thực hiện JS ở mức độ thấp của bánh xe di chuyển (click vào bánh xe): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel