我需要在父 div
中现有的末尾添加一个新的 div
并向右滚动以便始终看到最后添加的。
但是,我所有使用 jQuery
scrollLeft
的尝试都失败了(注意:使用 jQuery
不是强制性的,特别是,没有它的解决方案是欢迎)。
这是例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list1b</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#results {
font-size: 500%;
display: flex;
height: 4cm;
align-items: center;
overflow: auto;
}
</style>
<script>
var formula1 = "1 + 2x";
var formula2 = "= 1 + 2y";
var appendDiv = function (f) {
var newDiv = $("<div style='min-width:10cm;'>" + f + ·</div>"); // this div is an example
var dstDiv = $('#results');
dstDiv.append(newDiv);
//dstDiv.scrollLeft(???);
}
setTimeout(function () {
appendDiv(formula1);
}, 2000);
window.changeIt = function () {
appendDiv(formula2);
}
</script>
</head>
<body>
<div id="results" class="results"></div>
<button onclick='changeIt()'/>click me</button>
</body>
</html>
最佳答案
我想这就是你想要的。基本上,它获取 scrollWidth
并减去属性并向左滚动那么多。让我知道这是否适合您。
获取 scrollWidth
时需要使用 $('#results')[0]
因为 [0]
返回 JavaScript
版本的元素,而 $('#results')
返回 jQuery
版本。 scrollWidth
是一个 JavaScript
属性,width()
是一个 jQuery
函数。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list1b</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#results {
font-size: 500%;
display: flex;
height: 4cm;
align-items: center;
overflow: auto;
</style>
<script>
var formula1 = "1 + 2x";
var formula2 = "= 1 + 2y";
var appendDiv = function (f) {
var newDiv = $("<div style='min-width:10cm;'>" + f + "</div>"); // this div is an example
var dstDiv = $('#results');
dstDiv.append(newDiv);
var left = $("#results")[0].scrollWidth - $("#results").width();
$('#results').scrollLeft(left);
}
setTimeout(function () {
appendDiv(formula1);
}, 2000);
window.changeIt = function() {
appendDiv(formula2);
}
</script>
</head>
<body>
<div id="results" class="results"></div>
<button onclick='changeIt()'/>click me</button>
</body>
</html>
关于javascript - 追加 div 并向右滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42056455/