在初始点停止边距过渡

Question

好吧，这是我有一个漂亮的小滚动条（它们已经完成了工作，但是我想牵手制作一个），并且我希望它向左滚动X个像素。问题。问题是，如果用户将鼠标悬停在左侧并开始向后滚动文本，我希望它在其初始起点处停止。

body {
  background-color: black;
}
.wrapper {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  overflow: hidden;
  width: 500px;
  height: 300px;
  z-index: 98;
  border: 3px solid 2a3439;
  background-color: #353839;
}

.scroller {
  color: white;
  width: 1980px;
  background-color: transparent;
  height: 100%;
  position: relative;
  padding: 5px;
  margin-left: 0px;
  transition: all 2s linear 10s;
  -moz-transition: all 2s linear 10s;
  -webkit-transition: all 2s linear 10s;
}

.go-left:hover~.scroller {
  margin-left: -250px;
  transition: all 2s linear;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear ;
}

.go-left {
  opacity: 0;
  height: 300px;
  background-color: red;
  width: 200px;
  z-index: 99;
  position: absolute;
  top: 0;
}

.go-right {
  opacity: 0;
  height: 300px;
  background-color: red;
  width: 200px;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 300px
}

.go-right:hover+.scroller {
  margin-left: 250px;
  transition: all 2s linear;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
}

.image {
  display: block;
  overflow: hidden;
  Height: 490px;
}

在该示例中，如果您将鼠标悬停在左侧，我不希望它越过它的起点，因此请夹紧它。您可以在jsfiddle https://jsfiddle.net/Kaanha/puy6t4og/51/

上看到工作模型

使用一些Java并不是很难，但是这里的主要是，我需要它仅是纯CSS。没有java。

提前感谢所有帮助！