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

问题描述

继续此 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屋！