添加水平拖动以滚动捕捉

Question

我在添加水平拖动以滚动到我的代码时遇到了麻烦。单击并移动该块后，我希望它捕捉到每个末端。我尝试了一些类似dragscroll.js的库，但似乎没有任何效果。有什么快速的方法可以做到这一点吗？ https://jsfiddle.net/bo4ypnqL/3/

CSS

<div class="container">
  <div class="row">
    <% @cocktails.each do |cocktail| %>
      <div class="col-4">
        <div class="container d-flex justify-content-between">
          <div class="card-trip">
              <%= cl_image_tag cocktail.photo.key, crop: :fill %>
            <div class="card-trip-infos">
              <div>
                <h2><%= link_to cocktail.name, cocktail_path(cocktail) %></h2>
              </div>
              <h2 class="card-trip-pricing"><%=  %></h2>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

HTML

.both-lines {
  display: flex;
  height: 250px;
  color: #fff;
  width: 96vw;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  cursor: grab;
  }

.line-1 {
  flex-basis: 96vw;
  flex-shrink: 0;
  scroll-snap-align: start;
  position: relative;
  }

.line-2 {
  flex-basis: 96vw;
  flex-shrink: 0;
  scroll-snap-align: start;
  position: relative;
  }


.menu-block-img {
  background-color: gray;
  height: 100%;
  width: 100%;
}

.menu-block-img h2 {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 500;
}

.menu-block-1-text {
  background-color: #eb6608;
  height: 100%;
}