Question

我们有一个HTML页面，在其中有一个框，该框是需要提交的表单。无论如何，框的某些部分在当前视图中，但是当我们滚动页面时某些部分应该是可见的。

我们编写了这段代码，但滚动不流畅，正在跳跃！

if (!window.matchMedia('(max-width: 64.063em)').matches &&
        !window.matchMedia('(max-width: 40.063em)').matches) {
            window.onscroll = function() { checkOffset() };

            var boxElement = document.getElementById("box");
            var footerElement = document.getElementById("footer");;

            function checkOffset() {
                function getRectTop(el){
                    var rect = el.getBoundingClientRect();
                    return rect.top;
                }

                if((getRectTop(boxElement) + document.body.scrollTop) + boxElement.offsetHeight >= 
                    (getRectTop(footerElement) + document.body.scrollTop) - 5) {
                    boxElement.style.position = 'absolute';
                    boxElement.style.bottom = 'auto';

                    }

                if(document.body.scrollTop + window.innerHeight < 
                    (getRectTop(footerElement) + document.body.scrollTop)) {
                    boxElement.style.position = 'fixed'; 
                    boxElement.style.bottom = 0;
                    }
            }
        }

任何帮助将不胜感激分隔

Answer 1

只能通过HTML / CSS实现滚动框，如果您有简单的要求列表，则不需要JS。请参考下面的代码并运行它，看看它是否以简单的方式对您有帮助，如果您向下/向上滚动，则框会平滑滚动。

.main {
  height: 2000px;
}
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  position: fixed;
  bottom: 10px;
  right: 5px;
}

<div class="main">
<div class="box">
Test
</div>
</div>

滚动HTML内的框或图像时出现问题

1 个答案: