跟进这个post,我做了一个测试,但是我仍然遇到了一些问题 - 当你点击显示图片时,页面有两个滚动条。
显示图像时我不需要背景滚动条,我只需要图像容器上的滚动条。
如何在不使页面跳跃的情况下隐藏背景滚动条?
css,
#container-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: scroll;
z-index:100;
}
html,
<p>Please scroll down until you see the click button</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" class="get-photo">click</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="container-image" style="display:none">
<ul id="items-image">
<li><img src="winnie-the-pooh-2011-4.jpg"/></li>
</ul>
</div>
jquery,
$(document).ready(function(){
$('.get-photo').click(function(){
var object = $(this);
var object_path = object.attr('href');
var scroll_top = $(window).scrollTop();
//alert(object_path);
$('#container-image').show();
return false;
});
});
以下是测试page。
修改
只是设法隐藏了body
滚动条,它适用于所有浏览器接受IE8 - 我该如何修复IE?
$(document).ready(function(){
$('.get-photo').click(function(){
$('body').css('overflow', 'hidden');
var object = $(this);
var object_path = object.attr('href');
var scroll_top = $(window).scrollTop();
var height_document = $(document).height();
//alert(object_path);
$('#background-photo').css({
height:height_document + 'px',
display:'block'
});
$('#container-image').show();
return false;
});
$('#items-image img').click(function(){
var object = $(this);
$('body').css('overflow', 'auto');
$('#container-image').hide();
$('#background-photo').hide();
return false;
});
});
修改
修正了IE8:
$('body,html').css('overflow', 'hidden');
答案 0 :(得分:2)
在显示图像时在正文上设置overflow: hidden
,以隐藏滚动条:
$('body').css('overflow', 'hidden');
答案 1 :(得分:1)
我刚刚在Firebug中删除了以下样式:
overflow-x: auto;
overflow-y: scroll;
我可以看到没有滚动的背景。试试吧。
但在这种情况下,如果背景图片大于可见浏览器窗口 - 由于position:fixed