Ngăn chặn thanh cuộn bị ẩn cho người dùng trackpad MacOS trong WebKit / Blink

Hành vi mặc định của WebKit / Blink (Safari / Chrome) trên MacOS kể từ 10.7 (Mac OS X Lion) là để ẩn các thanh cuộn khỏi người dùng trackpad khi họ không sử dụng. Điều này có thể gây nhầm lẫn ; thanh cuộn thường là dấu hiệu trực quan duy nhất mà một phần tử có thể cuộn được.

Ví dụ ( jsfiddle )

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

Làm cách nào tôi có thể buộc một thanh cuộn luôn được hiển thị trên một phần tử có thể cuộn trong WebKit?

Sự xuất hiện của các thanh cuộn có thể được kiểm soát bằng -webkit-scrollbarcác phần tử giả  của WebKit ^{[ blog ]} . Bạn có thể vô hiệu hóa giao diện và hành vi mặc định bằng cách đặt -webkit-appearance ^{[ tài liệu ]} thành none.

Vì bạn đang xóa kiểu mặc định, bạn cũng cần tự xác định kiểu hoặc thanh cuộn sẽ không bao giờ xuất hiện. CSS sau đây tái tạo sự xuất hiện của các thanh cuộn ẩn:

Thí dụ (jsfiddle )

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

Đối với ứng dụng web một trang nơi tôi tự động thêm các phần có thể cuộn, tôi kích hoạt thanh cuộn của OSX bằng cách lập trình cuộn một pixel xuống và sao lưu:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Điều này kích hoạt các dấu hiệu trực quan mờ dần trong và ngoài.

Đây là một đoạn mã ngắn hơn có thể điều chỉnh các thanh cuộn trên toàn bộ trang web của bạn. Tôi không chắc nó có khác nhiều so với câu trả lời phổ biến nhất hiện nay không nhưng đây là:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Tìm thấy tại liên kết này: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Thanh cuộn trình duyệt hoàn toàn không hoạt động trên iPhone / iPad. Tại nơi làm việc, chúng tôi đang sử dụng các thanh cuộn JavaScript tùy chỉnh như jScrollPane để cung cấp giao diện người dùng trình duyệt chéo nhất quán: http://jscrollpane.kelvinluck.com/

Nó hoạt động rất tốt đối với tôi - bạn có thể tạo một số thanh cuộn tùy chỉnh thực sự đẹp phù hợp với thiết kế của trang web của bạn.

Một cách khác để đối phó với các thanh cuộn ẩn của Lion là hiển thị lời nhắc để cuộn xuống. Nó không hoạt động với các khu vực cuộn nhỏ như trường văn bản nhưng tốt với các khu vực cuộn lớn và giữ nguyên phong cách chung của trang web. Một trang web thực hiện việc này là http://versusio.com , chỉ cần kiểm tra trang ví dụ này và đợi 1,5 giây để xem lời nhắc:

http://versusio.com/en/samsung-galax-nexus-32gb-vs-apple-iphone-4s-64gb

Việc thực hiện không khó nhưng bạn phải cẩn thận, rằng bạn không hiển thị lời nhắc khi người dùng đã cuộn.

Bạn cần jQuery + gạch dưới và

$(window).scroll để kiểm tra xem người dùng đã tự cuộn chưa,

_.delay() để kích hoạt độ trễ trước khi bạn hiển thị lời nhắc - lời nhắc không nên gây khó chịu

$('#prompt_div').fadeIn('slow') mờ dần trong lời nhắc của bạn và tất nhiên

$('#prompt_div').fadeOut('slow') mờ dần khi người dùng cuộn sau khi thấy dấu nhắc

Ngoài ra, bạn có thể liên kết các sự kiện Google Analytics để theo dõi hành vi cuộn của người dùng.