当 #content 区域长于窗口高度(本机或 Vue.js）时收听

Listen when #content area is longer than window height (native or Vue.js)

本文关键字：Vue js 本机 高度 于窗口 #content 窗口 区域      更新时间：2023-09-26

我有一个以控件作为页脚的内容区域。控件始终位于内容区域下方。当内容区域长于window.innerHeight时，我想将页脚固定（位置：固定）到窗口底部，以便控件始终可见。如果内容区域小于窗口高度，则它再次位于其下方（位置：相对）。

我想我已经在调整窗口大小时实现了这一目标。但是，我也想听 #contentdiv，因为它包含一个文本区域，当用户在其中键入时，该文本区域可能会比窗口更长。我也需要某种事件侦听器。

window.addEventListener('resize', function() {
    var viewportHeight = window.innerHeight
    var contentHeight = document.getElementById('content').clientHeight;
    if (contentHeight > viewportHeight) {
        console.log('Larger')
    } else {
        console.log('Smaller')
    }
}, true)

我使用的是 Vue.js所以无论是这个还是原生的 Javascript，我都没有使用 jQuery。

嗯，

这并不容易。由于我不了解 Vue.js我只能告诉你原生 JS 解决方案 - 有两种方法：
1）如果内容仅在某些特定操作上更改，例如。用户编辑文本区域，然后您可以将高度检查器功能附加到相应的事件。
2）更通用的解决方案是设置功能，该功能将持续监视变化，如setInterval或requestAnimationFrame。

从性能的角度来看，第一个示例更好，但可能更难实现，这取决于有多少东西可以改变内容的大小。

相关文章：