Tôi hiểu rằng câu hỏi của bạn về cơ bản là cách tắt tính năng cuộn trơn tru. tuy nhiên tôi sẽ trả lời bạn một chút khác biệt để làm việc này.
Tại sao lại khác?
Thậm chí nếu bạn có thể phát hiện việc cuộn người dùng mượt mà, bạn không thể buộc người dùng vô hiệu hóa nó. Nói cách khác, bạn đang cố gắng giải quyết vấn đề thay vì giải quyết nó. vì vậy hãy giải quyết nó!
Giới thiệu: đường ống pixel-to-màn hình
Trên mỗi khung trình duyệt thực hiện các bước sau để hiển thị trang trên màn hình.
JavaScript. Thông thường, JavaScript được sử dụng để xử lý công việc sẽ dẫn đến thay đổi trực quan, cho dù đó là chức năng động của jQuery, sắp xếp một tập dữ liệu hay thêm các phần tử DOM vào trang. Tuy nhiên, nó không phải là JavaScript kích hoạt thay đổi trực quan: CSS Animations, Transitions, và Web Animations API cũng thường được sử dụng.
Tính toán kiểu. Đây là quá trình tìm ra các quy tắc CSS nào áp dụng cho các yếu tố nào dựa trên các bộ chọn phù hợp, ví dụ: .headline hoặc .nav> .nav__item. Từ đó, một khi các quy tắc được biết, chúng được áp dụng và các kiểu cuối cùng cho mỗi phần tử được tính toán.
Bố cục. Khi trình duyệt biết quy tắc nào áp dụng cho một phần tử, nó có thể bắt đầu tính toán bao nhiêu không gian cần thiết và vị trí của nó trên màn hình. Mô hình bố cục của web có nghĩa là một yếu tố có thể ảnh hưởng đến người khác, ví dụ:chiều rộng của phần tử thường ảnh hưởng đến độ rộng của trẻ em và cứ như vậy lên hết cây, vì vậy quá trình này có thể khá liên quan đến trình duyệt.
Sơn. Vẽ tranh là quá trình điền pixel. Nó liên quan đến việc vẽ ra văn bản, màu sắc, hình ảnh, biên giới và bóng tối, về cơ bản là mọi phần trực quan của các yếu tố. Bản vẽ thường được thực hiện trên nhiều bề mặt, thường được gọi là các lớp.
Tổng hợp. Vì các phần của trang được vẽ thành nhiều lớp tiềm năng mà chúng cần phải được vẽ vào màn hình theo thứ tự chính xác để trang hiển thị chính xác. Điều này đặc biệt quan trọng đối với các phần tử chồng lên nhau, vì một sai lầm có thể dẫn đến một phần tử xuất hiện trên đầu trang của một phần tử không chính xác.
chi tiết và nguồn: https://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Bước 1:
Bước đầu tiên là để loại bỏ làm cho thuộc tính css tốn kém. Bạn có thể không xóa được nhiều, tuy nhiên bạn có thể thay thế rgba(255,255,255,1); bằng #fff để xóa lớp alpha.
kiểm tra để biết thêm chi tiết: https://csstriggers.com/ một số thuộc tính không cần phải thực hiện layout hoặc paint và có ít hơn những người khác.
Bước 2:
Kiểm tra các trình kích hoạt forced synchronous layout. Điều này xảy ra khi bạn buộc trình duyệt thực hiện layout trong khi ở bước javascript, sau đó quay lại javascript, thay vì đi bộ mượt mà dọc theo đường ống trên mỗi khung hình. để làm điều này, tránh nhận các thuộc tính bố trí và thiết lập chúng trực tiếp sau đó trong một vòng lặp chẳng hạn.
đây là một danh sách những gì gây ra bố trí đồng bộ: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
đọc thêm: https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en
Bước 3:
Move thành phần trên trang mà cần phải được sơn lại thường xuyên vào lớp mới.
Trình duyệt cần phải sơn lại mỗi khi bạn cuộn hoặc hoạt ảnh đang phát. để tránh một trang đầy đủ sơn lại và chỉ vẽ lại phần đang thay đổi, hãy di chuyển phần đó (ví dụ cũ, điều hướng, hoạt ảnh) sang một lớp mới trên trình duyệt (suy nghĩ về nó như lớp photoshop)
để làm như vậy sử dụng thuộc tính css will-change để cho trình duyệt di chuyển nó sang một lớp mới và sử dụng transform: translateZ(0); nếu bạn muốn buộc broswer di chuyển nó.
hãy thử cắt giảm trên css làm chậm quá trình cuộn, trong các màu rgba cụ thể, các độ mờ không phải 1 và hộp đổ bóng. – dandavis
Đó không thực sự là một lựa chọn cho tôi. – Thayne
chỉ đơn giản là bạn không muốn cuộn trơn tru trên firefox phải không? –