限制滚动到DIV

这一直是我遇到过几次的烦恼，所以我认为最好看看是否有一个好方法。我在许多地方都有很多“可滚动”DIV元素的实例，它们几乎完全按照预期工作，除了当鼠标滚轮或轨迹板是控制滚动条的时候。限制滚动到DIV

主要的问题是，一旦div达到其滚动条的底部，该命令然后转移到主滚动条，恼人地改变用户页面的位置。我注意到，同样的事情发生在本页顶部的“可能已经有答案的问题”框中，我当前正在输入的框也会发生这种情况，这使得我认为这是按标准发生的事情，不过，我确定过去曾使用过网站，要求我将光标移动到元素外部以便滚动主页面。

有没有办法解决这个问题？我很高兴使用Javascript，如果这是最好的解决方案，我最初的想法是，某种onmouseover命令可以锁定屏幕，直到发生onmouseout，但我的JS是非常有限的，我找不到任何类似于适应。

，我使用DIV元素的一个例子是：提前任何帮助

<div id='bodytext' 
style='width:300px; height:300px; z-index:4; visibility: visible; overflow: auto;'> 
Data more than 300px high 
</div>

谢谢，如果它是不可能的，那么澄清仍然是非常有帮助！

来源

2012-08-06 JoeP

您需要查看DOM scroll event并确定当前正在滚动的元素。基本上，一旦你能够确定事件发生在父元素上，你会想要stop the event。

来源

2012-08-06 13:05:20 John

谢谢你，我对你的链接阅读并可以理解的概念。如果任何人能够提出任何我了解得更清楚的事情，我将离开，因为我现在还没有答复，否则我会看看我是否能够运作并明天接受您的答案。 – JoeP 2012-08-06 16:42:23

我认为会有一个更简单的解决方案，测试小规模的完美工作，但它导致我的问题（或我造成自己的问题）实现它动态生成的内容。这就是说，这是对我提出的问题的准确回答，因此答案已被接受。 – JoeP 2012-08-15 12:40:20

，如果你使用jQuery你可以做类似

$(document).ready(function(){ 
    $('#bodytext').on('mouseenter', function() 
    { 
    $('body').css('overflow', 'hidden'); 
    }); 
    $('#bodytext').on('mouseleave', function() 
    { 
    $('body').css('overflow', 'visible'); 
    }); 
});

此，当你进入复选框，并添加它，当你离开它会自动隐藏身体的滚动条。

来源

2012-08-06 13:05:46 bkwint

因为非框架问题的框架而被投票表决。修改您的答案并回复，我很乐意收回我的投票。 – John 2012-08-06 13:06:59

您可以侦听可滚动目标元素上的滚轮事件，并且只有在达到“滚动结束”时才阻止默认行为。

var el = document.getElementById("Element"); 
var wrapper = document.getElementById("Wrapper"); 
wrapper.addEventListener("wheel", wheelEvent); 

function wheelEvent(e){ 
    var space = (wrapper.scrollHeight - wrapper.offsetHeight) - wrapper.scrollTop; 
    if(e.deltaY < 0){ 
    if(wrapper.scrollTop == 0){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    }else if(space <= 0){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    } 
}

这里是一个工作示例： https://jsfiddle.net/rivieremanuel/rcxa6csr/4/

来源

2017-04-02 17:14:39 Manuel

非常好！这与我最终写作的内容非常相似，尽管毫无疑问这更加整洁。 – JoeP 2017-04-03 14:38:50

谢谢@JoeP，很高兴你喜欢它。 – Manuel 2017-04-05 07:16:24

限制滚动到DIV

回答

相关问题