使用位置仅垂直固定，避免水平移动

Question

我意识到了一组像图片中那样的箭头：

当页面向下和向上滚动时，我需要箭头垂直移动：我可以使用position：fixed来存档它，但问题是这个CSS格式也会为水平scoll添加约束，这对于＃39 ;允许在本网站上播放。有什么技巧可以避免这个问题吗？

这是我的代码的一部分：

CSS：

#arrowR{
  position: fixed !important;
  margin-left: -50px !important;
}
#textR{
  color: black  !important;
  font-weight: bold !important;
  position: fixed !important;
}

#arrowL{
  position: fixed !important;
  margin-right: -50px !important;
}

div#RCont {
    float: right;
}

div#LCont {

    float: left;
    height: 100px;
    margin-top: 40%;
    margin-left: 20px;
}

div#RContBack {
  float: left;
}

div#LContBack {
  float: right !important;
      margin-top: 40% !important;
      margin-right: 70px !important;

}

然后我的HTML代码：

<div id="cont_ArrowL" ng-show ="!routingCtrl.isFirstElement()" >
   <div id="LContBack">
      <span id="textR">
      Indietro
      <span>
   </div>
   <div id="RContBack">
      <md-icon md-svg-src="./image/left.svg" aria-label="android " id="arrowR"  class="goPrevious" ng-click="routingCtrl.previousPage()">Indietro</md-icon>
   </div>
</div>
<div id="cont_ArrowR" ng-show ="!routingCtrl.isLastElement()">
   <div id="LCont">
      <span id="textR">
      Avanti
      <span>
   </div>
   <div id="RCont">
      <md-icon md-svg-src="./image/right.svg" aria-label="android " id="arrowR" class="goNext"  ng-click="routingCtrl.nextPage()"></md-icon>
   </div>
</div>

Answer 1

首先你需要检测水平滚动，然后改变位置固定属性

var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('scroll horizontol');
        lastScrollLeft = documentScrollLeft;
         $("#Arrow").css({'position' : 'absolute'})
    }
});

现在的问题是它为水平和水平设置绝对位置。垂直运动，以便检测何时返回并再次固定

scrollpos = $(document).scrollLeft();
if (scrollpos == 0){$("#Arrow").css({'position' : 'fixed'})}