在滚动正文

Question

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

当光标位于右侧div时，此功能正常，但是当超过左侧div时，则主体滚动而不是右侧div内容。我可以使用css在正文滚动之前强制滚动右边的div，还是这是js的工作？

**刚刚意识到在尝试再次向上滚动时会出现一种丑陋的情况，在这种情况下你会卡在右侧div的滚动条中。呻吟。我在想我真正需要的是将左侧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

尝试将滚动应用于top-content 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，以指示右侧窗口尚未向下滚动。当您滚动页面时，我们可以检查该变量，如果它仍然是假的，则强制窗口保持在顶部。将右侧窗口向右滚动到底部后，您可以将该变量值更改为true，这将停止强制您返回顶部的脚本，然后您就可以访问下面的内容。 / p>

//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>