时间戳

首页 > 解决方案 > 滚动 HTML 中的框或图像时出现问题

javascript - 滚动 HTML 中的框或图像时出现问题

问题描述

我们有一个 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;
                    }
            }
        }

任何帮助将不胜感激

标签： javascripthtmlcss

解决方案

框的滚动只能通过 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>

推荐阅读