I guess I am missing a property here that sets the current position of the swiper-scrollbar-drag to be where the active slide is. Instead it scrolls to the beginning of the scrollbar.

var swiper = new Swiper('.swiper', {
                spaceBetween: 10,
                direction: "horizontal",
                loop: false,
                freeMode: false,
                breakpoints: {
                    1920: {
                        slidesPerView: 7
                    },
                    1100: {
                        slidesPerView: 6
                    },
                    840: {
                        slidesPerView: 5,
                    },
                    660: {
                        slidesPerView: 4,
                    },
                    500: {
                        slidesPerView: 3,
                    },
                    200: {
                        slidesPerView: 2,
                    },
                },
                scrollbar: {
                    el: '.swiper-scrollbar',
                    draggable: true,
                }
            });