在水平滚动框中显示选定框
在水平滚动框中显示选定框
提问于 2020-07-07 16:15:34
我有水平滚动框，即行列结构在它。这是工作很好，现在我需要显示选定的方框以及。需要显示框选择，因为我有附加的图像，这是滚动后的前面。在这件事上需要帮助吗？
我的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选择的。
回答 2
Stack Overflow用户
发布于 2020-07-07 17:30:41
如果我的理解是正确的，这就是你的意思。如果没有，请留下评论。
我只是让scroll div移动，在滚动div时，将5加或减5到其css位置左侧。
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>
Stack Overflow用户
发布于 2020-07-08 19:42:15
你可以使用类似这样的东西。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62770885
复制相关文章
相似问题
腾讯云开发者
