Question

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

我认为在调整窗口大小时我已经实现了这一点。但是我也想听#content div，因为它包含一个textarea，当用户输入时，它可以比窗口更长。我也需要某种事件监听器。

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。

Answer 1

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

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

当#content区域长于窗口高度（native或Vue.js）时监听

1 个答案: