在页面顶部显示标题 - 滚动事件重新触发问题

Question

我有一个设置，其中有一个标题，仅当可滚动区域的 scrollTop 为 0 时才会显示（意味着它们位于页面顶部）。这在许多情况下似乎都可以正常工作，但在某些情况下它会以一种相当烦人的方式失败。

虫子

如果可滚动区域中的内容稍微大到足以形成滚动条，那么当您向下滚动时，标题将消失，可滚动区域现在将增大以填充该空白空间，这将允许内容在没有滚动条的情况下出现。 从有滚动条到没有滚动条的转换显然会在我测试过的所有浏览器中触发另一个滚动事件我不知道这是为什么或如何解决它。

一种可能的解决方案

我可以将我的内容设置为 101% 的最小高度，这样无论实际内容高度是多少，滚动条都会一直存在。然而，这不是我最喜欢的解决方案，我正在寻找更好的解决方案。

html

<div class="container">
<div class="header">Header</div>
<div class="content" data-bind="css: {'show-header': showHeader}">
    <div class="sub-header">Sub Header</div>
    <div class="scrollable" data-bind="event: {'scroll':test}">
        <div class="stuff">asdf</div>       
    </div>
</div>

CSS

    .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 352px;
    border: 1px solid black;
}

.header {
    height: 48px;
    background: grey;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: top 0.3s;
}

.show-header {
 top: 48px;   
}


.sub-header {
    height: 48px;
    background: lightgrey;
}

.scrollable {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

.stuff {
    /*min-height: 101%;*/
    height: 260px;
    /*height: 2000px;*/
}

JS

    var appViewModel = {};
var didScroll = false;
var scrollElem = $('.scrollable');

appViewModel.showHeader = ko.observable(true);

appViewModel.test = function() {
    didScroll = true;
};


setInterval(function() {
    if (didScroll) {
        didScroll = false;
        appViewModel.hasScrolled();
    }
}, 250);


appViewModel.hasScrolled = function() {
    var st = scrollElem.scrollTop();

    if ( st > 0 && appViewModel.showHeader() ) {
        appViewModel.showHeader(false);
    }
    else if ( st <= 0 && !appViewModel.showHeader() ) {
        appViewModel.showHeader(true);
    }
};


ko.applyBindings(appViewModel);

JS 小提琴 JS Fiddle Example

Answer 1

我进行了一些重写，以使这更加 Knockout-y 并且（希望）更加简单明了。我将标题高度作为变量带入代码中，因为我需要使用它。

scrollTop 是一个受限制的 observable，因此它不会每 250 毫秒发布一次更新。

我使用 observable 和 if 绑定来控制是否呈现标头。当 scrollTop 改变时，一个订阅的函数决定是否应该显示标题。计算取决于当前是否显示标题。

scrollableHeight 控制可滚动区域的高度，如果标题隐藏则展开它。

我知道避免在标题出现时滚动条消失的问题的唯一方法是仅在滚动超出标题高度时删除标题。

var appViewModel = {};
var didScroll = false;

appViewModel.headerHeight = 48;
appViewModel.scrollTop = ko.observable(0).extend({rateLimit:250});
appViewModel.showHeader = ko.observable(true);
appViewModel.scrollTop.subscribe(function (newTop) {
    console.debug("New top");
    if (appViewModel.showHeader()) {
        appViewModel.showHeader(newTop < appViewModel.headerHeight);
    }
    else {
        appViewModel.showHeader(newTop <= 0);
    }
});
appViewModel.scrollableHeight = ko.computed(function () {
    return (appViewModel.showHeader()) ? '256px' : (256 + appViewModel.headerHeight) + 'px';
});

appViewModel.test = function (data, event) {
    var scrollElem = $(event.target);
    appViewModel.scrollTop(scrollElem.scrollTop());
};

ko.applyBindings(appViewModel);

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 352px;
  border: 1px solid black;
}
.header {
  background: grey;
}
.sub-header {
  height: 48px;
  background: lightgrey;
}
.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  height: 256px;
}
.stuff {
  background-color: #fee;
  height: 320px;
  /*height: 2000px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="container">
  <!-- ko if:showHeader -->
  <div class="header" data-bind="style:{height:headerHeight+'px'}">Header</div>
  <!-- /ko -->
  <div class="sub-header">Sub Header</div>
  <div class="scrollable" data-bind="style:{height:scrollableHeight}, event: {'scroll':test}">
    <div class="stuff">asdf</div>
  </div>
</div>