两个滚动条问题? [英] Two scrollbars problems?

查看:95
本文介绍了两个滚动条问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

继续此 post ,我做了一个测试,但我还是有一些问题 - 当你点击显示图像时,页面有两个滚动条。



当图像显示时,我不需要背景滚动条,我只需要图像容器上的滚动条。



如何隐藏

    >#container-image {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:scroll;
z-index:100;
}

html,

 < p>请向下滚动,直到看到点击按钮< / 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 />
< a href =#class =get-photo>点击< / 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 />

< div id =container-imagestyle =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



EDIT:



只是设法隐藏 body 滚动条,它适用于所有浏览器接受IE8 - 我如何修复IE?

  $(document).ready(function(){
$('。get-photo')。 ('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')。点击(function(){

var object = $(this);
$('body')。css('overflow','auto');
$('#container-image')。hide();
$('#background-photo')。hide();
return false;
});

});

编辑



修复了IE8:

  $('body,html')css('overflow','hidden'); 


解决方案

设置 overflow:hidden 在正在显示图像时隐藏滚动条:

  ).css('overflow','hidden'); 


Following up on this post, I made a test, but I still got a bit of problem - the page has two scroll bars when you click to display the image.

I don't need the background scrollbar when the image is being displayed, I only need the scrollbar on the image container.

How can I hide the background scrollbar without making the page jumpy?

the css,

#container-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    z-index:100;
}

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

the 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;
        });

    });

Here is the test page.

EDIT:

Just managed to hide the body scrollbar and it works on all browsers accept IE8 - how can I fix 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;
        });

    });

EDIT:

Fixed IE8:

$('body,html').css('overflow', 'hidden');

解决方案

Set overflow: hidden on the body while the image is being displayed, to hide the scrollbars:

$('body').css('overflow', 'hidden');

这篇关于两个滚动条问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆