提问人：Junior 提问时间：11/7/2023 最后编辑：YogiJunior 更新时间：11/7/2023 访问量：56
window.scrollY 值由错误的 ScrollBar 控制
window.scrollY value is controlled by wrong ScrollBar
问：
我正在尝试在高度为 275px 后将滚动条集成到动态表格中。表格达到 275px 后滚动条正常工作，但是，当我使用表格滚动条时，我没有看到 window.scrollY 值有任何变化。相反，整个页面的滚动条正在更改window.scrollY的值，这不是我需要的。
这是我的表容器的片段：
// Define Table Container and add it to the parent container
var tableContainer = $('<div>').css({
'max-width': '55px',
'max-height': '275px',
'overflow-y': 'scroll',
'border': '1px solid black', // Add a border for visualization
});
let scrollPosition = 0;
function handleScroll() {
scrollPosition = window.scrollY;
console.log("PosY = ", scrollPosition);
}
let my_array = [
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6]
];
// Function to update and display the 'result'
function updateAndDisplayResult() {
// Loop through your data and populate the table
my_array.forEach(function(subArray) {
var row = $('<tr>'); // Create a row for each sub-array
subArray.forEach(function(item) {
var cell = $('<td>').text(item);
cell.css('border', '1px solid black'); // Add cell border
row.append(cell);
});
tableContainer.append(row); // Append the row to the table
});
// Finally, append the tableContainer to your document
$('#result').append(tableContainer);
};
window.addEventListener('scroll', handleScroll)
updateAndDisplayResult();<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>我还附上了几张图片以更好地澄清：
我尝试过很多东西，但我被困在这里。以下任何解决方案将不胜感激：
- 将表格滚动条滚动链接到 window.scrollY 值
- 隐藏滚动条，直到定义最大高度。
提前感谢您的任何帮助！
答：
1赞
ZeNix
11/7/2023
#1
因此，我删除了表格上的边框，因为即使没有滚动条，它也会不断显示，并且滚动条在需要时完全可见。
若要在需要时显示表格滚动条，可以使用 .'overflow-y': 'scroll','overflow-y': 'auto',
scrollPosition 的问题在于，您已将其附加到窗口，而不是相关表。
我已将函数更改为 your 来监听滚动操作，因为 .scrollYscrollTop()addEventListener.on('scroll')
现在它将按预期工作：
// Define Table Container and add it to the parent container
var tableContainer = $('<div>').css({
'max-width': '55px',
'max-height': '275px',
'overflow-y': 'auto',
});
let scrollPosition = 0;
function handleScroll() {
scrollPosition = tableContainer.scrollTop();
console.log("PosY = ", scrollPosition);
}
let my_array = [
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6]
];
// Function to update and display the 'result'
function updateAndDisplayResult() {
var cScroll = tableContainer.scrollTop(); //Store the value
// Loop through your data and populate the table
my_array.forEach(function(subArray) {
var row = $('<tr>'); // Create a row for each sub-array
subArray.forEach(function(item) {
var cell = $('<td>').text(item);
cell.css('border', '1px solid black'); // Add cell border
row.append(cell);
});
tableContainer.prepend(row); // Add the new rows on top instead
});
tableContainer.scrollTop(cScroll); // Set the scroll back
// Finally, append the tableContainer to your document
$('#result').append(tableContainer);
};
tableContainer.on('scroll', handleScroll)
updateAndDisplayResult();<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>评论
0赞
Junior
11/7/2023
非常感谢！这成功了。还有一件事。这样做的原因是为了跟踪滚动位置，因此，如果用户向下滚动表格并在表格顶部添加了一个新元素，我可以保持该位置并防止它跳到顶部以显示新元素。我想我可以使用这个“window.scrollTo（0， scrollPosition）;”，现在我的scrollPosition工作正常，但位置仍然跳到顶部。我尝试在updateAndDisplayResult（）中的几个不同位置添加它，但结果都相同。有什么想法吗？
0赞
ZeNix
11/7/2023
在添加新元素之前，您可以创建一个变量来存储表的当前位置，然后您可以在添加新元素后再次将位置设置为值： ，我将尝试解决并编辑响应。var cScroll = tableContainer.scrollTop();
0赞
Baocang Nie
11/7/2023
#2
只需将“tableContainer.scrollTop（scrollPosition）”添加到名为“handleScroll”的函数的最后一行
或者 tableContainer.get（0）.scrollTo（{top： scrollPosition}）
这是同步滚动的示例代码：
// Define Table Container and add it to the parent container
var tableContainer = $('<div>').css({
'max-width': '55px',
'max-height': '275px',
'overflow-y': 'scroll',
'border': '1px solid black', // Add a border for visualization
});
let scrollPosition = 0;
function handleScroll() {
scrollPosition = window.scrollY;
var tableScrollEl = tableContainer.get(0);
var docScrollEl = document.scrollingElement;
var docScrollHeight = docScrollEl.scrollHeight - docScrollEl.clientHeight
var tableScrollHeight = tableScrollEl.scrollHeight - tableScrollEl.clientHeight;
var scale = tableScrollHeight / docScrollHeight
console.log("PosY = ", scrollPosition);
tableScrollEl.scrollTo({top: scrollPosition * scale})
//tableContainer.scrollTop(scrollPosition)
}
let my_array = [
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6],
[1, 2, 3],
[4, 5, 6]
];
// Function to update and display the 'result'
function updateAndDisplayResult() {
// Loop through your data and populate the table
my_array.forEach(function(subArray) {
var row = $('<tr>'); // Create a row for each sub-array
subArray.forEach(function(item) {
var cell = $('<td>').text(item);
cell.css('border', '1px solid black'); // Add cell border
row.append(cell);
});
tableContainer.append(row); // Append the row to the table
});
// Finally, append the tableContainer to your document
$('#result').append(tableContainer);
};
window.addEventListener('scroll', handleScroll)
updateAndDisplayResult();<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
评论