Plugin chuột bên ngoài khiến trình duyệt hiển thị lại trang trong Mac OS X?

Question

Vấn đề cơ bản: cắm chuột ngoài khiến cả chrome và firefox thêm thanh cuộn vào trang (mà tôi đã tạo) trong trình duyệt của mình. Tôi đang cố gắng tìm ra lý do tại sao điều này, nhưng có một thời gian khó tìm kiếm thông tin. Chúng tôi đã kiểm tra và sao chép sự cố trên OSX 10.7.5 và 10.8.5.

lý thuyết của tôi là kể từ khi cả hai trình duyệt được đáp ứng theo cách này, chuỗi các sự kiện là một cái gì đó như:

1. cắm chuột bên ngoài.
2. Hệ điều hành nhận dạng chuột và gửi một số loại sự kiện để chạy các ứng dụng.
3. Các ứng dụng đang chạy nhận sự kiện này và thay đổi hiển thị của trang.

Tôi đã phân biệt các kiểu tính toán của cả hai trạng thái và không có sự khác biệt, chỉ để loại trừ nó. Đây là một gif động của những gì đang xảy ra. điều duy nhất tôi đang làm để kích hoạt sự thay đổi được cắm vào một con chuột bên ngoài:

Câu hỏi của tôi là, những loại sự kiện được gửi từ hệ điều hành cho trình duyệt khi một con chuột bên ngoài đã được cắm vào và làm cách nào để tôi tìm hiểu sâu hơn về cách sự kiện đó đang được xử lý?

Answer 1

Nếu tôi không hoàn toàn hiểu nhầm vấn đề của bạn, thì điều này không liên quan gì đến trình duyệt, mà là tính năng OS X để ẩn thanh cuộn (trong mọi chương trình được hỗ trợ) miễn là bạn đang sử dụng thiết bị đầu vào không cần thanh cuộn (như bàn di chuột của MacBook). Nếu trường hợp này xảy ra, thì thanh cuộn cũng sẽ xuất hiện trong ví dụ: Trình tìm kiếm được chuột của bạn được cắm.

Để thay đổi hành vi này, hãy truy cập System Preferences>General và chọn Always theo Show scroll bars.

Answer 2

Đối với tôi vấn đề là việc sử dụng đơn vị vw không tính đến chiều rộng thanh cuộn. Thay đổi CSS của chúng tôi để sử dụng% thay vì vw hoạt động (50% so với 50vw).

CanIUse.com nói:

Hiện nay tất cả các trình duyệt nhưng Firefox không đúng cách xem xét 100vw là toàn bộ chiều rộng trang, bao gồm thanh cuộn dọc, có thể gây một thanh cuộn ngang khi overflow: auto được thiết lập .

• http://caniuse.com/#feat=viewport-units

Xem codepen này cho bằng chứng. http://codepen.io/anon/pen/ZGYNWZ thử có và không có Chuột USB.

CSS:

:root, html { 
    overflow-x: auto; 
    overflow-y: scroll; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.thing { 
    width: 100vw; 
    height: 110vh; 
    background: blue; 
} 

HTML:

<div class="thing"> 

</div>