Question

如何制作div以使页面滚动页面但仅在页面的某个区域？

我无法解决如何使用CSS仅对页面的一部分进行此操作，我认为javascript可能是唯一的选择。

例如页面的三个部分，顶部，中部和底部。

有一个右浮动div，它应该与用户在中间部分滚动并停止滚动以保持原位＆＃39;位于中间部分的顶部以及中间部分的底部。

＆＃13;

#Top {
  background-color: grey;
  width: 100%;
  height: 400px;
}
#Middle {
  background-color: green;
  width: 100%;
  height: 800px;
}
#Bottom {
  background-color: blue;
  width: 100%;
  height: 400px;
}
#scrolling-section {
  background-color: yellow;
  width: 30%;
  height: 150px;
  float: right;
}

＆＃13;

<div id="Top">
</div>
<div id="Middle">
  <div id="scrolling-section">
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
  </div>
</div>
<div id="Bottom">
</div>

＆＃13;

JSFiddle：fiddle

Answer 1

所以在这里你有使用jquery的解决方案：

收听scroll事件，并在向上/向下滚动时计算scrolling-section超出Middle部分的数量。
将position: relative添加到scrolling-section。
相应地调整scrolling-section的位置。

＆＃13;

$(document).scroll(function() {
  var wrapper = $('#Middle');
  var box = $('#scrolling-section');

  var offsetTop = - wrapper.offset().top + $(window).scrollTop();
  var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight();

  if (offsetBottom > 0 && offsetTop < 0) {
    box.css({
      'top': 0
    });
  } else if (offsetBottom > 0 && offsetTop > 0) {
     box.css({
      'top': offsetTop + 'px'
    });
  } else {
    box.offset({
      'top': $(window).scrollTop() + offsetBottom
    });
  }

});

＆＃13;

#Top {
  background-color: grey;
  width: 100%;
  height: 400px;
}
#Middle {
  background-color: green;
  width: 100%;
  height: 800px;
}
#Bottom {
  background-color: blue;
  width: 100%;
  height: 400px;
}
#scrolling-section {
  position: relative;
  background-color: yellow;
  width: 30%;
  height: 150px;
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Top">
</div>
<div id="Middle">
  <div id="scrolling-section">
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
  </div>
</div>
<div id="Bottom">
</div>

＆＃13;

让我知道您对此的反馈。谢谢！

Answer 2

为了阅读您想要更改要解决的div状态的点，需要一些Javascript。您可以使用getBoundingClientRect()方法执行此操作。我找到了一个会告诉你的小提琴。你会读到#Middle的位置。我添加了一个输入字段，显示值。当仓位达到零时，变化将是。然后，您可以更改＃scrolling-section的CSS属性。

您将看到一些元素的附加读数，以确保它可以定位并保持原始宽度;

＆＃13;

var scrollposition = document.getElementById("Middle");
var scrollsection = document.getElementById("scrolling-section");
var scrollsection_offsetLeft = scrollsection.offsetLeft;
var scrollsection_width = scrollsection.offsetWidth;


var valy = document.getElementById("posy");


window.addEventListener("scroll", function(event) {
  valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top;

  if (valy.value <= 0) {
    scrollsection.style.position = "fixed";
    scrollsection.style.top = "0px";
    scrollsection.style.left = scrollsection_offsetLeft + "px";
    scrollsection.style.width = scrollsection_width + "px";
  } else {
    scrollsection.style.position = "static";
    scrollsection.style.top = "auto";
    scrollsection.style.left = "auto";
  }
}, false)

＆＃13;

#posy {
  position: fixed;
  top: 0;
}
#Top {
  background-color: grey;
  width: 100%;
  height: 400px;
}
#Middle {
  background-color: green;
  width: 100%;
  height: 800px;
}
#Bottom {
  background-color: blue;
  width: 100%;
  height: 400px;
}
#scrolling-section {
  background-color: yellow;
  width: 30%;
  height: 150px;
  float: right;
}

＆＃13;

<input type="text" id="posy" />
<div id="Top">
</div>
<div id="Middle">
  <div id="scrolling-section">
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
  </div>
</div>
<div id="Bottom">
</div>

＆＃13;

Answer 3

我在手机上，但如果你添加

#scrolling-section {
  position: fixed;
  background-color: yellow;
  width: 30%;
  height: 150px;
  right: 8px;
}

这将滚动页面，但实际上需要有一个事件监听器，当屏幕上出现＃scrolling-section时可能会触发，可能会添加属性position：fixed;当#bottom出现时，另一个事件监听器计算#middle set margin-top＆amp;的大小。位置：绝对的;希望这有助于指出正确的方向。

只在某个地方制作带有页面的div滚动？

3 个答案: