Jeżeli to jest zwykła strona internetowa, a nie jakaś appka właśnie z mapami, grami itd - to generalnie nie rób tego. Nie psuj tego, do czego użytkownicy są przyzwyczajeni. Nie utrudniaj zaznaczania tekstu (taki będzie skutek uboczny), nie utrudniaj korzystania ze strony osobom ograniczonym ruchowo, wzrokowo, itd. No i musisz dopilnować, żeby Twoje specjalne obsługiwanie myszy nie zepsuło dotyku (przeglądarki przez dotyk emuluje zdarzenia myszy poza zdarzeniami dotyku).
Ogólnie sprawa jest prosta - po wciśnięciu przycisku - zapisz koordynaty myszy
Wraz z przesuwaniem myszy zmieniaj scrollTop elementu ze scrollem (zwykle body, ale użyj https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement chyba, że masz jakieś dodatkowe divy i faktycznie scrollowany jest inny element)
Przy puszczeniu myszy zakończ efekt.
Nie będzie idealnie - nie będzie efektu przyśpieszenia, tj. jeżeli podczas ruchu myszą puścisz przycisk, to strona jeszcze przez jakiś czas "leci" i zwalnia.
Jest taki plugin do jQuery, który robi dokładnie to, ale potrzebujesz specjalnie owrapować element i nie wiem czy wspiera to widoczny scrollbar (przydałoby się, jeżeli ponownie - zamierzasz popełnić to na normalnej stronie, a nie elemencie typu mapa): https://davetayls.github.io/jquery.kinetic/
Zrobiłem 100 lat temu wersję bez jQuery, ale miała buga, którego nigdy nie naprawiłem, a potem autor wersji jQuery robił jeszcze jakieś zmiany, za którymi nie podążałem.
Dla reacta poleciłbym https://www.npmjs.com/package/react-zoom-pan-pinch
Ale ponownie - nie rób tego na normalnej stronie.