Я понимаю, что ваш вопрос по сути состоит в том, как отключить плавную прокрутку. однако я отвечу вам немного по-другому, чтобы заставить это работать.

почему разные?

даже если вы можете обнаружить плавную прокрутку пользователей, вы не можете заставить пользователя отключить его. Другими словами, вы пытаетесь охватить проблему, а не решить ее. так что давайте решим это!

вступление: конвейер пикселей на экран

на каждом кадре браузер делает следующие шаги для отображения страницы на экране.

• JavaScript. Обычно JavaScript используется для обработки работы, которая приведет к визуальным изменениям, будь то функция jQuery animate, сортировка набора данных или добавление элементов DOM на страницу. Это не должен быть JavaScript, который вызывает визуальное изменение, хотя: CSS-анимации, переходы и API веб-анимации также обычно используемый.

• расчеты стиле. Это процесс выяснения того, какие правила CSS применяются к тем элементам, которые основаны на соответствующих селекторах, например .заголовок или. nav > .сча__пункт. Оттуда, как только правила известны, они применяются и вычисляются окончательные стили для каждого элемента.

• макет. Как только браузер узнает, какие правила применяются к элементу, он может начать вычислять, сколько места он занимает и где он находится на экране. В интернете модель макета означает, что один элемент может влиять на другие, например, ширина элемента обычно влияет на ширину его дочерних элементов и так далее вверх и вниз по дереву, поэтому процесс может быть довольно сложным для браузера.

• краски. Живопись-это процесс заполнения пикселей. Он включает в себя рисование текста, цветов, изображений, границ и теней, по существу каждой визуальной части элементов. Чертеж обычно выполняется на нескольких поверхностях, часто называемых слои.

• композитинга. Поскольку части страницы были нарисованы в потенциально несколько слоев, их нужно нарисовать на экране в правильном порядке, чтобы страница отображалась правильно. Это особенно важно для элементов, которые перекрывают друг друга, поскольку ошибка может привести к неправильному появлению одного элемента поверх другого.

подробности и источник: https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

Шаг 1:

первый шаг-удалить дорогостоящие свойства CSS рендеринга. Возможно, вы не сможете удалить много, однако вы можете заменить rgba(255,255,255,1); с #fff, который удаляет Альфа-слой.

проверить это более подробно: https://csstriggers.com/ некоторые свойства не нужно layout или paint и есть менее тяжелые, чем другие.

Шаг 2:

проверить forced synchronous layout триггеры. Это происходит, когда вы заставляете браузер делать layout в то время как его на шаге javascript, затем вернитесь к javascript, вместо того, чтобы гладко ходить по конвейеру на каждом кадре. чтобы сделать это, избегайте получения атрибутов макета и установки их непосредственно после этого в цикле, например.

вот список того, что вызывает макет синхронизации : https://gist.github.com/paulirish/5d52fb081b3570c81e3a

подробнее: https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en

Шаг 3:

перемещение компонентов на странице, которые необходимо регулярно перекрашивать в новые слои.

браузер должен перекрашивать каждый раз, когда вы прокрутки и анимации играет. чтобы избежать полной перекраски страницы и только перекрасить часть, которая меняется, переместите эту часть (например, параллакс, навигация, анимация) в новый слой браузера (подумайте об этом, как слои photoshop)

для этого используйте will-change свойство css, чтобы сообщить браузеру переместить его на новый слой и использовать transform: translateZ(0); если вы хотите заставить broswer переместить его.