javascript - 隐藏不在 div 内的元素

Question

我有一个 website (点击红色拳头)。它具有搜索功能。如果您单击搜索，它无法占据 100% 的窗口高度，您仍然可以滚动不在“morphsearch”内的内容。我哪里错了？

//morphSearch code
(function() {
  var morphSearch = document.getElementById('morphsearch'),
    input = morphSearch.querySelector('input.morphsearch-input'),
    ctrlClose = morphSearch.querySelector('span.morphsearch-close'),
    ctrlClose2 = morphSearch.querySelector('span.morphsearch-close2'),
    isOpen = isAnimating = false,
    // show/hide search area
    toggleSearch = function(evt) {
      // return if open and the input gets focused
      if (evt.type.toLowerCase() === 'focus' && isOpen) return false;

      var offsets = morphsearch.getBoundingClientRect();
      if (isOpen) {
        classie.remove(morphSearch, 'open');

        // trick to hide input text once the search overlay closes 
        // todo: hardcoded times, should be done after transition ends
        if (input.value !== '') {
          setTimeout(function() {
            classie.add(morphSearch, 'hideInput');
            setTimeout(function() {
              classie.remove(morphSearch, 'hideInput');
              input.value = '';
            }, 300);
          }, 500);
        }

        input.blur();
      } else {
        classie.add(morphSearch, 'open');
      }
      isOpen = !isOpen;
    };

  // events
  input.addEventListener('focus', toggleSearch);
  ctrlClose.addEventListener('click', toggleSearch);
  ctrlClose2.addEventListener('click', toggleSearch);
  // esc key closes search overlay
  // keyboard navigation events
  document.addEventListener('keydown', function(ev) {
    var keyCode = ev.keyCode || ev.which;
    if (keyCode === 27 && isOpen) {
      toggleSearch(ev);
    }
  });


  /***** for demo purposes only: don't allow to submit the form *****/
  morphSearch.querySelector('button[type="submit"]').addEventListener('click', function(ev) {
    ev.preventDefault();
  });
})();

.morphsearch {
  width: 200px;
  min-height: 40px;
  background: #f1f1f1;
  position: absolute;
  z-index: 10000;
  top: 50px;
  right: 50px;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transition-property: min-height, width, top, right;
  transition-property: min-height, width, top, right;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.morphsearch.open {
  width: 100%;
  min-height: 100%;
  top: 0px;
  right: 0px;
}

<div id="morphsearch" class="morphsearch">
  <form id="searchForm" class="morphsearch-form" method="post">
    <input id="s" class="morphsearch-input" type="search" placeholder="Search Dundaah..." />
    <input class="morphsearch-submit" type="submit" value="Submit" id="submitButton" />
  </form>
  <div id="resultsDiv" class="morphsearch-content2"></div>
  <span class="morphsearch-close"></span>
  <span class="morphsearch-close2"></span>	
</div>

Answer 1

请按如下方式更改您的 CSS，然后重试:

.morphsearch.open {
    width: 100%;
    min-height: 100%;
    top: 0px;
    right: 0px;
    position: fixed;
    bottom: 0;
    overflow-y: scroll;
}