Question

如果我禁用身体上的overflow: hidden;，则html会在屏幕底部添加某种裁剪。如果启用了此功能，我也将无法使用“滚动到顶部”按钮。

有什么办法可以解决此问题，或者网格滚动会影响按钮显示吗？同样，箭头键滚动在grid div上似乎不起作用。希望你们能提供帮助！

body, html {
  overflow: hidden; /*scrolling problem*/
  height: 100%;
}

完整代码：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("backTop").style.opacity = "1";
  } else {
    document.getElementById("backTop").style.opacity = "0";
  }
}


function topFunction() {
  document.body.scrollTop = 0; 
  document.documentElement.scrollTop = 0; 
}

body,
html {
  overflow: hidden; /*scrolling problem*/
  height: 100%;
}

.container {
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.left-div {
  background-color: yellow;
  height: 100vh;
  width: 100px;
}

.mid-div {
  background-color: pink;
  height: 100vh;
  width: 100%;
  overflow: scroll;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(90px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

  .grid-item {
    position: relative;
    grid-row-end: span 1;
    grid-column-end: span 2;
    background-color: red;
  }

    .span-wide {
        grid-column-end: span 2;
        grid-row-end: span 2;
    }
    
    .span-long {
        grid-column-end: span 1;
        grid-row-end: span 4;
    }

.right-div {
  background-color: blue;
  height: 100vh;
  width: 100px;
}

  #backTop {
    opacity: 0;
    transition: 1s opacity;
    width: 40px;
    height: 40px;
    border-radius: 2em;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: green;
  }

<div class="container">
  <div class="left-div"></div>
  
  <div class="mid-div">
    <div class="grid-item"></div>
    <div class="grid-item span-wide"></div>
    <div class="grid-item"></div>
    <div class="grid-item span-long"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item span-long"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
  
  <div class="right-div">
    <button onclick="topFunction()" id="backTop" title="Back to Top">Top</button>
  </div>
</div>

Answer 1

您需要从正文中删除填充和边距：

body,
html {
  padding: 0;
  margin: 0;
}

并将中间div的高度调整为100vh减去滚动条的高度：

.mid-div {
  height: calc(100vh - 20px);
}

我在这里更新了您的小提琴：https://jsfiddle.net/bjqLmswz/

Answer 2

将ID添加到您的中级div

  <div id="midDiv" class="mid-div">
<div class="grid-item"></div>
<div class="grid-item span-wide"></div>
<div class="grid-item"></div>
<div class="grid-item span-long"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item span-long"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>

然后修改scrollFunction（）

    document.getElementById("midDiv").onscroll = function() {scrollFunction()};

    function scrollFunction() {
      if (document.getElementById("midDiv").scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("backTop").style.opacity = "1";
      } else {
        document.getElementById("backTop").style.opacity = "0";
      }

}

溢出引起的奇怪滚动效果：隐藏在正文中，html

2 个答案: