如何解决scrollTop按钮仅在首次点击时起作用
我有一个使用overflow-y: scroll;
的div,我想使用一个按钮,单击该按钮将移至div的下一行。只有在没有任何点击操作之后,我的代码才能完美地实现第一次点击。
<button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up"></span></button>
<div class="partners-inner big-scrol" id="scrol">
<div class="">
<div class="row media-row-height " style="text-align:center;" dir="rtl">
@foreach (var item in Model)
{
foreach (var item1 in item.tbl_Videos)
{
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding" style="text-align:center;">
@if (!string.IsNullOrEmpty(item1.PhotoURL))
{
<a href="@item1.VideoURL">
</a>
<img src="@Url.Content(String.Format(ConfigurationManager.AppSettings["AdminDomain"] + "{0}",Url.Content(item1.PhotoURL)))" class="img-media">
}
</div>
}
}
</div>
</div>
</div>
<button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down"></span></button>
JS:
$(document).ready(function () {
$('#slideRight').click(function () {
$('#scrol').scrollTop(300);
});
$('#slideLeft').click(function () {
$('#scrol').scrollTop(-300);
});
});
CSS:
.big-scrol {
height: 300px;
overflow-y: scroll;
}
.media-row-height {
height: 900px;
width: 1500px;
margin: auto;
padding: 10px;
}
解决方法
为使其正常工作,您必须为每次点击添加或减去值。
我们还需要知道滚动元素有多高才能停止添加值。为此,我添加了要滚动元素的ID id="wrap"
$(document).ready(function () {
var top = 0;
var winH = $('#wrap').height();
$('#slideRight').click(function () {
if (top < winH) { top = top + 300; };
$('#scrol').scrollTop(top);
});
$('#slideLeft').click(function () {
top = top - 300;
if (top < 0) { top = 0 };
$('#scrol').scrollTop(top);
});
});
.big-scrol {
height: 300px;
overflow-y: scroll;
}
.media-row-height {
height: 900px;
width: 1500px;
margin: auto;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up">UP</span></button>
<div class="partners-inner big-scrol" id="scrol">
<div class="">
<div id="wrap" class="row media-row-height" style="text-align:center;" dir="rtl">
<!-- @foreach (var item in Model)
{
foreach (var item1 in item.tbl_Videos)
{
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding"
style="text-align:center;">
@if (!string.IsNullOrEmpty(item1.PhotoURL))
{
<a href="@item1.VideoURL">
</a>
<img src="@Url.Content(String.Format(ConfigurationManager.AppSettings[" AdminDomain"] + "{0}",Url.Content(item1.PhotoURL)))" class="img-media">
}
</div>
}
} -->
</div>
</div>
</div>
<button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down">DOWN</span></button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。