what you want to achieve is
with a large frame outside. There is a div inside
.
this div is a scrollView that scrolls up and down.
there is a button that clicks to add a module to the div.
but the scroll bar does not move at this time.
you want to click the button and add the module, then slide to the bottom of the div to show the new module.
is internally scrollable div to the bottom, not the entire page.
how can I implement this?
gets the current scrolling element element , and then sets it element.scrollTop = element.scrollHeight .
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
-sharpbox{
width: 600px;
height: 600px;
overflow: scroll;
}
.p1,.p2,.p3,.p4{
height: 300px;
background: -sharpccc;
}
</style>
</head>
<body>
<div>
<div id="box">
<p class="p1">11111
<p class="p2">22222
<p class="p3">33333
<p class="p4">44444
</div>
<button class="btn"></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(".p2,.p3,.p4").hide();
var i = 2;
$(".btn").click(function(){
$(".p" + i).show()
$("-sharpbox").scrollTop(300 + (i-2) * 300);
iPP;
})
</script>
</body>
</html> 1. It is feasible to set up scrollTop.
2. If the new module is an element, you can simply use element.scrollToView ()
3.element.scrollToView () to pass a parameter alignToTop,true to indicate that the top slides to the top of the visual area, and false means that the bottom slides to the bottom of the visual area.
Previous: Dynamically load the component (dynamic import in render function) inside the render function
this is the first view view view0 what I want to make is that when the button is clicked, the content is displayed corresponding to the button. ...