window.scrollY受错误滚动条控制，求表格滚动关联及隐藏方案

我给高度超过275px的动态表格添加了滚动条，表格高度达标后滚动条可正常使用，但滚动表格滚动条时window.scrollY值无变化，反而页面滚动条会改变这个值，不符合需求。

问题图示 #

原始代码 #

HTML #

<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

JavaScript #

// 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();

需求 #

• 将表格滚动条的滚动位置关联到window.scrollY值
• 表格高度未达到设定的max-height前隐藏滚动条

解决方案 #

1. 关联表格滚动与页面滚动位置 #

你之前只监听了页面的滚动事件，需要同时监听表格容器的滚动事件，实现两者滚动位置的双向同步：

• 监听表格容器的scroll事件，将容器的scrollTop同步到页面滚动位置；
• 监听页面的scroll事件，将window.scrollY同步到表格容器的scrollTop。

如果表格可滚动高度与页面可滚动高度不一致，可根据比例换算调整，避免滚动超出范围。

2. 动态控制滚动条显隐 #

将表格容器的overflow-y从scroll改为auto，这样只有当内容高度超过容器max-height时才显示垂直滚动条，否则滚动条自动隐藏。

修改后的完整代码 #

HTML #

<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

JavaScript #

// Define Table Container and add it to the parent container
var tableContainer = $('<div>').css({
  'max-width': '55px',
  'max-height': '275px',
  'overflow-y': 'auto', // 改为auto，内容超出时显示滚动条
  'border': '1px solid black',
});

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() {
  my_array.forEach(function(subArray) {
    var row = $('<tr>');
    subArray.forEach(function(item) {
      var cell = $('<td>').text(item);
      cell.css('border', '1px solid black');
      row.append(cell);
    });
    tableContainer.append(row);
  });
  $('#result').append(tableContainer);
};

// 同步表格滚动到页面
tableContainer.on('scroll', function() {
  const tableScrollTop = $(this).scrollTop();
  window.scrollTo(0, tableScrollTop);
  console.log("表格滚动位置 = ", tableScrollTop);
});

// 同步页面滚动到表格
window.addEventListener('scroll', function() {
  const windowScrollY = window.scrollY;
  tableContainer.scrollTop(windowScrollY);
  console.log("页面滚动位置 = ", windowScrollY);
});

updateAndDisplayResult();

内容的提问来源于stack exchange，提问作者Junior