Я использую HTML5 Drag and Drop API для реорганизации элементов в вертикальном списке.Список представляет собой overflow-y: scroll div.В macOS Chrome и macOS Firefox, если элемент перетаскивается очень близко (~ 20 пикселей) к внутреннему краю контейнера, контейнер прокручивается.Такое поведение отсутствует в macOS Safari.
JSFiddle Demo
Меня интересует, как реализовать модифицированную версию этого поведения для всех современных браузеров:
- Как увеличить область активации прокрутки.В MacOS Chrome он должен быть внутри контейнера и относительно небольшой (20 пикселей).Предпочтительно его можно увеличить до 15% от высоты контейнера.
- Предпочтительно, чтобы область оставалась внутри списка (поэтому, если вы прокручиваете вне списка, контейнер не прокручивается)
- Как отключить явно недокументированное поведение прокрутки Chrome.(Предполагается, что невозможно включить эту функцию в Safari, Edge).
Ограничения:
- Приемлемо необработанное решение JavaScript / html / css
- Я использую React, поэтому библиотека React, которая работает с необработанным JS HTML5 Drag n Drop, также будет приемлемой
- Нет jQuery
Редактировать: Обновлено описание поддержки браузера, обновил JSFiddle для поддержки macOS Firefox.