问题:
I want to manually scroll a UL list with two button. First time 4 items will show and when user click on up or down button list will scroll 1 item a time.
$(docu...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I want to manually scroll a UL list with two button. First time 4 items will show and when user click on up or down button list will scroll 1 item a time.
$(document).ready(function() {
$(".down").on("click", function() {
$(".scroll").scrollTop(
$(".listitem:nth-child(4)").offset().top -
$(".listitem:nth-child(3)").offset().top
);
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div></div>
Now i am stuck i don't how i can dynamically pass the next and previous li to make it work . i want to do it exactly like that as i show in down button list scroll to next item.
回答1:
You can use scrollIntoView() method to scrolls the element into the visible area. Note that :not(:nth-last-child(3))
would be the n - 1
visible list.
$(document).ready(function() {
$(".down").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.next();
if ($target.get(0) && $target.is(':not(:nth-last-child(3))')) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
$(".up").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.prev();
if ($target.get(0)) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem active">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div>
</div>
</div>