限制垂直滚动到单个div而不是整个页面

时间：2014-11-17 04:09:58

标签： javascript html css

我目前在网页上有从左到右排列的98个单独的div，每个div都可以单独滚动其他div。由于它们包含的图像，它们都是不同的大小，但都超过了Web浏览器的高度。我希望能够从一个div的顶部滚动到底部，而不会触发整个页面向下滚动。

换句话说，我想确保只有div滚动并且浏览器窗口保持在相同的位置。我已经找到了很多类似于这个问题的建议来使用overflow:hidden，但是当div超过浏览器窗口大小时，该命令不会覆盖滚动。

我的代码的基本结构如下：

<div class="container" id="one"><img src="strips/1.jpg" /></div>

#one {
    margin: 0px;
    padding: 0px;
    height: 7296px;
    width: 172px;
    border-width: 0px;
    border-style: 0;
    left: 0px;
    top: 0px;
     float:left;
}

$(document).scroll(function(){
    $('body').append($('#one').html());
});

我附上了一个JSFiddle链接和我的完整代码（它很长但很重复）以及我正在处理的项目的更详细描述。希望这能为您提供足够的信息。

http://jsfiddle.net/1uma0074/

2 个答案:

答案 0 :(得分：0)

请清楚您要滚动内部内容或单个div。如果身体内在的内容那么 如果你想滚动内容而不是窗口，它将解决问题 延长你的鳕鱼包括以下内容。 

$( document ).ready(function() {

    window_h = $(window).height();
	$('html').height(window_h);
	$('body').height(window_h);

	window_w = $(window).width();
	$('html').width(window_w);
	$('body').width(window_w);

});
html{ overflow: hidden;}
body { overflow: scroll;}

答案 1 :(得分：0)

  1. 在个别容器中放入名为一，二等...... 的每个div 格
    1. 将身高：100％添加到 html {} 和 body {}
    2. 在 body {}
      3. 之前删除点
    3. 将溢出-y：滚动和浮动：左属性添加到 .container {}
    4. #everything {}
      5. 身高：100％

    2. 检查下面的代码并实现所有其他97个滚动条。

    -Cheers！

    $(document).scroll(function(){
    $('body').append($('#one').html());
});
$(document).scroll(function(){
    $('body').append($('#two').html());
});
$(document).scroll(function(){
    $('body').append($('#three').html());
});
$(document).scroll(function(){
    $('body').append($('#four').html());
});
$(document).scroll(function(){
    $('body').append($('#five').html());
});
$(document).scroll(function(){
    $('body').append($('#six').html());
});
$(document).scroll(function(){
    $('body').append($('#seven').html());
});
$(document).scroll(function(){
    $('body').append($('#eight').html());
});
$(document).scroll(function(){
    $('body').append($('#nine').html());
});
$(document).scroll(function(){
    $('body').append($('#ten').html());
});
$(document).scroll(function(){
    $('body').append($('#eleven').html());
});
$(document).scroll(function(){
    $('body').append($('#twelve').html());
});
$(document).scroll(function(){
    $('body').append($('#thirteen').html());
});
$(document).scroll(function(){
    $('body').append($('#fourteen').html());
});
$(document).scroll(function(){
    $('body').append($('#fifteen').html());
});
$(document).scroll(function(){
    $('body').append($('#sixteen').html());
});
$(document).scroll(function(){
    $('body').append($('#seventeen').html());
});
$(document).scroll(function(){
    $('body').append($('#eighteen').html());
});
$(document).scroll(function(){
    $('body').append($('#nineteen').html());
});
$(document).scroll(function(){
    $('body').append($('#twenty').html());
});
$(document).scroll(function(){
    $('body').append($('#twentyone').html());
});
$(document).scroll(function(){
    $('body').append($('#twentytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#twentythree').html());
});
$(document).scroll(function(){
    $('body').append($('#twentyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#twentyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#twentysix').html());
});
$(document).scroll(function(){
    $('body').append($('#twentyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#twentyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#twentynine').html());
});
$(document).scroll(function(){
    $('body').append($('#thirty').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtyone').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtythree').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtysix').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#thirtynine').html());
});
$(document).scroll(function(){
    $('body').append($('#fourty').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtyone').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtythree').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtysix').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#fourtynine').html());
});
$(document).scroll(function(){
    $('body').append($('#fifty').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftyone').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftythree').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftysix').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#fiftynine').html());
});
$(document).scroll(function(){
    $('body').append($('#sixty').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtyone').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtythree').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtysix').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#sixtynine').html());
});
$(document).scroll(function(){
    $('body').append($('#seventy').html());
});
$(document).scroll(function(){
    $('body').append($('#seventyone').html());
});
$(document).scroll(function(){
    $('body').append($('#seventytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#seventythree').html());
});
$(document).scroll(function(){
    $('body').append($('#seventyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#seventyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#seventysix').html());
});
$(document).scroll(function(){
    $('body').append($('#seventyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#seventyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#seventynine').html());
});
$(document).scroll(function(){
    $('body').append($('#eighty').html());
});
$(document).scroll(function(){
    $('body').append($('#eightyone').html());
});
$(document).scroll(function(){
    $('body').append($('#eightytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#eightythree').html());
});
$(document).scroll(function(){
    $('body').append($('#eightyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#eightyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#eightysix').html());
});
$(document).scroll(function(){
    $('body').append($('#eightyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#eightyeight').html());
});
$(document).scroll(function(){
    $('body').append($('#eightynine').html());
});
$(document).scroll(function(){
    $('body').append($('#ninety').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetyone').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetytwo').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetythree').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetyfour').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetyfive').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetysix').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetyseven').html());
});
$(document).scroll(function(){
    $('body').append($('#ninetyeight').html());
});
    html{height:100%; }
body {
	overflow:hidden;
	overflow-y: hidden;
	overflow-x:scroll;
height:100%;    
}

.horizontalscroll {
	overflow-x: scroll;
	overflow-y:hidden;
}

.container {
	overflow-y:scroll;
    height:100%;
    float:left;
    
}
	
#one {
	margin: 0px;
	padding: 0px;
	width: 172px;
	border-width: 0px;
	border-style: 0;
	left: 0px;
	top: 0px;
	 float:left;
    height: 7296px;
    
}

#everything {
	width: 9918px;
	padding: 0px;
	margin: 0px;
	height:100%;
	border-width: 0px;
	border-style: 0px;
	top: 0px;
	left: 0px;
	overflow-y: hidden;
	overflow-x: scroll;
	overflow:hidden;
}
    <div class="wrapper" id="everything">
    <div class="container"><div id="one"><img src="strips/1.jpg" /></div></div>

</div>

相关问题
最新问题