滚动时固定div

-1

在我的页面上，我有一个div，宽度为100％，包含2个浮动div，每个宽度为50％，其中一个div的高度较大，但溢出设置为scroll 。所以我需要的是，当我滚动我的页面，并且到达包含2个div的div时，页面滚动停止，并且只滚动具有溢出设置滚动的div，并且在完成滚动该div之后，我的页面可以开始再次滚动。滚动时固定div

来源

2015-10-21 Alex Crz

嗯，听起来像你想要改变焦点从页面到你的div当你达到它。到目前为止你尝试过什么，它在哪里给出错误？你为什么要这种行为开始。：x – Shilly

是的，这是正确的，我试图让它到达它时被阻止，并在完成滚动后，继续滚动，我的网页..直到现在我尝试了JavaScript，但我不能做我想要的东西.. –

你可以用onscroll事件监听器做一些令人讨厌的事情，并计算div开始的位置，然后将焦点改变为div。（如果你想关注它，别忘了在它上面加上一个tab-index）。但总而言之，我会建议对这种类型的设计。你不能改变布局吗？ – Shilly

只是一个片段，以显示它如何“可以”完成。我自己我不会使用这个，因为听每一个滚动事件可能是非常昂贵的表现。

var div = document.querySelector('yourDivReference'), 
    focussed = false; 
window.addEventListener('scroll', function (event) { 
    if (!focussed && window.pageYOffset >= (div.offsetTop - 2)) { 
     div.focus(); 
     focussed = true; 
    } 
});

在IE上测试。在其他浏览器中，您可能必须使用不同于offsetTop和pageYOffset的属性。这个想法是，你计算窗口滚动了多少。一旦你到达可滚动的div位置，你把焦点放在div上，这样div就会滚动。你可以自己添加相反的地方，在那里你检查div滚动的结束，所以你可以将焦点切换回false，把焦点放回到主体，然后继续滚动。不要忘记在你想要关注的任何元素上加上tab-index。如果他们没有给出准确的位置，您可能必须将浮动元素包裹到另一个非浮动容器中。

来源

2015-10-21 16:10:38 Shilly

滚动时固定div

回答

相关问题