在滚动正文之前强制滚动div

Question

我目前有两个并排的div。在页面加载时，左div需要占据窗口高度的100%，并且具有垂直居中的内容。右侧div的内容将更长，并且需要滚动。在右div完全滚动时，我希望主体开始滚动，以显示两个div下面的内容。

当光标位于右侧div时，这一操作很好，但当光标位于左侧div时，主体会滚动，而不是右侧div的内容。我可以在正文滚动之前使用css强制滚动右div吗？或者这是js的工作吗？

**刚刚意识到，当你试图再次向上滚动时，也会出现一种丑陋的情况，即你被困在右侧的滚动中。我在想，我真正需要的是将左div滚动并在容器的末尾释放。对此，最佳解决方案是什么？**

我开始使用jQuery Stickem来研究粘性div，它以我想要的方式工作，但我认为这可能有些过头了，因为它肯定可以更简单地实现。

我需要一个解决方案必须在所有浏览器中工作，包括IE8+

.top-content {position:relative; height:100vh}
.left-div {background-color:blue; float:left; width:35%; height:100%;}
.right-div {background-color:yellow; float:right; width:65%; height:100%; overflow:scroll;}
.bottom-contet {position:relative; background-color:pink; height:500px;}

<div class="top-content">
	<div class="left-div">Currently, if the cursor is over the right div the page works as required. But if over this left div then the body scrolls straight to content below. I want it to always scoll the right div regardless of cursor position</div>   	
    <div class="right-div">
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
        
    	<p>scrolling right stuff</p>
    	<p>scrolling right stuff</p>    
	</div>    
</div>   
      
<div class="bottom-contet">
  		<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
        
    	<p>content below</p>
      
</div>  

欢迎所有建议，我发现了类似的问题，但没有一个完全符合我的要求。

Answer 1

一个解决方案是监听右侧div的滚动事件。然后，您可以使用element.scrollTop和最大滚动值来检查它是否已完全滚动（或关闭）。最初，您可以将主体的overflow-y设置为hidden。一旦到达内部div所需的滚动位置，就可以将其更改为overflow-y: scroll。这个更改可以通过js/jquery来完成。

您可能还需要处理相反的情况。其中用户可以返回到初始状态。

Answer 2

尝试将滚动应用于顶部内容div并修复左侧div。它应该完成工作。之后您可能需要调整一些边距。

将您的css更改为：

.top-content {position:relative; height:100%; overflow: scroll}
.left-div {background-color:blue; float:left; width:35%; height:100%; position: fixed}
.right-div {background-color:yellow; float:right; width:65%; height:100%; }
.bottom-contet {position:relative; background-color:pink; height:500px;}

Answer 3

您可以这样做：

首先创建一个变量，并将其值设置为false，以指示右侧窗口尚未向下滚动。当您滚动页面时，我们可以检查该变量，如果它仍然为false，则强制窗口保持在顶部。右窗口向右滚动到底部后，您可以将该变量值更改为true，这将停止迫使您返回顶部的脚本，然后您就可以访问下面的内容。

//unable to scroll down by default
var rightScrolled = false; 
//when we scroll the page...
$(window).on('scroll', function(){
    //check if we have scrolled the right window to the bottom
	if(rightScrolled == false) {
        //we haven't, force the window to remain at the top
  	    window.scrollTo(0, 0);
  }
});
$(function($) {
    //when we scroll the right div...
    $('.right-div').on('scroll', function() {
        //check if we have reached the bottom
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            //if we have, set our variable to true
            rightScrolled = true;
        }
    })
});

.top-content {position:relative; height:100vh}
    .left-div {background-color:blue; float:left; width:35%; height:100%;}
    .right-div {background-color:yellow; float:right; width:65%; height:100%; overflow:scroll;}
    .bottom-contet {position:relative; background-color:pink; height:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="top-content">
    	<div class="left-div">Currently, if the cursor is over the right div the page works as required. But if over this left div then the body scrolls straight to content below. I want it to always scoll the right div regardless of cursor position</div>   	
        <div class="right-div">
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
            
        	<p>scrolling right stuff</p>
        	<p>scrolling right stuff</p>    
    	</div>    
    </div>   
          
    <div class="bottom-contet">
      		<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
            
        	<p>content below</p>
          
    </div>