javascript - 在水平滚动框中显示选定的框

Question

我有水平滚动框，即其中的行列结构。那工作正常现在我也需要显示选定的框。需要显示根据我附加的图像选择的框，该框在滚动后位于前面。需要帮助吗？

我的 html 结构是这样使用 angular JS 和 ionic 的。

<div class="row" <div class="row" style="width:100%;overflow-x:scroll;">
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">

</div>
<div class="col col70" style="width:200px;height:150px;border:1px solid black;">

</div>
</div> 

我有这样的结构，它看起来像 [ ] 1

现在我如何显示 div 是使用 javascript 选择的。

Answer 1

你可以使用这样的东西。

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  height: 300px;
  width: 300px;
  border: 1px solid white;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="scrollmenu">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>E</a>
  <a>F</a>
  <a>G</a>
  <a>H</a>
  <a>I</a>
  <a>J</a>
  <a>K</a>
  <a>L</a>
  <a>M</a>
  <a>N</a>
  <a>O</a>
  <a>P</a>
  <a>Q</a>
  <a>R</a>
  <a>S</a>
  <a>T</a>
  <a>U</a>
  <a>V</a>
  <a>W</a>
  <a>X</a>
  <a>Y</a>
  <a>Z</a>
</div>

Answer 2

如果我的理解是正确的，这就是你的意思。如果没有，请发表评论。

我只是让滚动 div 在滚动 div 时向左的 css 位置添加或减去 5 移动。

var lastX = $(".row").scrollLeft();
$(".row").scroll(function() {
  
  var position = $(".scroll-box").position();
  var position1 = $(".fa-caret-down").position();
  
  const $el = $(".row");
  let currX = $el.scrollLeft();
  
  if (currX > lastX) {
  
    $(".scroll-box").css("left", position.left + 5);
    $(".fa-caret-down").css("left", position1.left + 5);
    lastX = $el.scrollLeft();
  
  } 
  
  if (currX < lastX) {
  
    $(".scroll-box").css("left", position.left - 5);
    $(".fa-caret-down").css("left", position1.left - 5);
    lastX = $el.scrollLeft();
  
  }
  
});

.scroll-box {

  position: fixed;
  bottom: 75px;
  left: 125px;
  
}

.fa-caret-down {
 
 position: fixed;
 left: 215px;
 bottom: 40px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="row" style="width: 100%; overflow-x:scroll;">
<div style="width: 150%; height: 150%;">The following scroll box follows the scroller.</div>
<br><br><br><br><br><br><br><br><br>
<div class="scroll-box col col70" style="width:200px;height:150px;border:1px solid black;">
</div>
<i class='fas fa-caret-down' style='font-size:48px;color:red'></i>
</div>