javascript - 基于响应式布局设置固定高度 Pane

Question

我有一个遵循响应式设计并具有以下布局结构的网络应用程序。当窗口的 width > 768px 时显示左侧布局，否则显示右侧布局。

根据初步研究，我认为没有现代的纯 CSS 方法可以做到这一点，因此我实现了 jQuery 代码来解决它。

$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        $('.search__results').addClass('overflow-y-scroll').height(fixedHeight);
    } else {
        $('.search__results').removeClass('overflow-y-scroll').height('auto');
    }
});

并且显示了我的 CSS 类

.overflow-y-scroll {
    overflow-y: scroll;
}

我想将我的代码留在这里供审查，并寻求 DRY-er 代码，我认为有些地方可能需要改进。

768px being fixed, should it be called from a global variable where it is the single point for setting the breakpoints? if yes I wonder where it should be placed so SCSS and javscripts can both use it?

-

should I name $('.search__results') as a variable? or perhaps even make it a more generic helper function? if yes? any tips on how to write it?

我也很好奇创建此类响应式布局时通常的最佳实践是什么。

谢谢!

==========

编辑 1:(观察)在用户启动调整大小操作之前不会调用。

编辑 2:(改进)可以启动延迟以防止逐像素调用调整大小操作

Answer 1

您可以在 CSS 中创建媒体查询，这样您就不必一直添加和删除 overflow-y-scroll。

.overflow-y-scroll-small {
      height: auto;
  }

@media screen and (max-width: 768px)
  .overflow-y-scroll-small {
      overflow-y: scroll;
  }

因此，如果屏幕大于 768px，则滚动将为 auto，否则为 scroll。

如果需要，您还可以将元素缓存在全局变量中:(为什么要使用双下划线？)

var searchResults = $(".search__results");
$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        searchResults.height(fixedHeight);
    } else {
        searchResults.height(''); //empty it so the css takes over.
    }
});

如果您确实想专注于优化，您还可以保留一个 bool 值来查看它是否更大，如下所示:

var searchResults = $(".search__results");
var smaller = false;
$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        searchResults.height(fixedHeight);
        smaller = true;
    } else if (smaller){
        searchResults.height(''); //empty it so the css takes over.
        smaller = false;
    }
});

这样，高度就不会每次都重置。