jQuery滚动问题与身高100％ [英] jQuery Scrolling issue with body height 100%

查看：100
本文介绍了jQuery滚动问题与身高100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Chrome的网站上发现了一些奇怪的问题，如果我有100％的jQuery页面滚动正文停止工作。我无法删除身高：100％，因为这需要使页面类的50％的.header类。 Firefox不受这个问题的影响。我已经看过其他类似的问题，但没有帮助。



我在这里写了一个测试： http://codepen.io/anon/pen/bIHxc 。



。



我试过这些东西让它在chrome中工作，但每个都停止其他的东西从工作：


  1. 当前 http://codepen.io/anon/pen/bIHxc -
    标题是页面的50％（好），但滚动无法在Chrome中运行）

  2. 尝试min-height：100％而不是身高：100％在body css中 -
    这允许滚动使用chrome（好），但折叠标题（坏）

    3. 绝对 -
    在展开＃侧栏（单击左上角的打开按钮）之前，页眉和滚动都可以正常工作（良好）。 #maincontainer现在可以自由移动，特别是在移动设备或Mac触控板上非常明显（非常糟糕！）。它看起来好像overflow-x没有工作或什么。

我试图在没有javascript的情况下做到这一点。我试图做一些不可能的事情吗？
$ b

。
$ b $ p 

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =HandheldFriendlycontent =True/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/> 
< script type =text / javascriptsrc =assets / js / jquery.min.js>< / script> 
< style> 
 html，body {
 padding：0; 
保证金：0; 
 overflow-x：hidden; 
} 
 html {
 height：100％; 
} 
 body {
 height：100％; 
} 
 #sideBar {
 background：red; 
位置：固定; 
身高：120％; 
 width：200px; 
} 
 #mainContainer {
 -webkit-transition：转换0.4s缓动，保留0.4s缓动; 
 -moz-transition：转换0.4s缓解，保证金0.4s缓解; 
背景：蓝色; 
 z-index：1000; 
职位：亲属; 
 margin-left：70px; 
身高：100％; 
} 
 nav {
 width：100％; 
身高：100％; 
背景：紫色; 
职位：亲属; 
 -webkit-transition：宽度为0.4s缓解; 
 -moz-transition：宽度0.4s缓解; 
} 
 #mainNavCheck：checked〜#mainContainer {
 -webkit-transform：translate3d（130px，0，0）; 
 -moz-transform：translate3d（130px，0，0）; 
} 
 #mainNavCheck：not（：checked）〜#sideBar span {
 color：blue; 
} 
 .content {
 background：grey; 
} 
 .header {
 height：50％; 
 background：lime; 
} 
 #mainNavCheck {
 position：absolute;剩余
：-999px; 
可见性：隐藏; 
} 
 h1 {
 padding：0; 
保证金：0; 
} 
< / style> 
< head> 
< body> 
< input type =checkboxid =mainNavCheck/> 
< div id =sideBar> 
< nav> 
< label for =mainNavCheckclass =togglemenu> OPEN< / label> 
< div class =click> ScrollUp< / div> 
< / nav> 
< / div> 
< div id =mainContainer> 
< div class =header> 
 header  - 浏览器窗口高度的50％
< / div> 
< div class =content> 
< h1>这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。这是很多文字。 < / H1> 
 
< div class =click> 
< br />< br />< br />< br />< br /> 
 ScrollUp 
< / div> 
< / div> 
< / div> 
< script> 
 $（。click）。click（function（）{
 $（'html，body'）。animate（{scrollTop：0}，slow）; 
}） ; 
< / script> 
< / body> 
< / html>


解决方案

我想我找到了一个解决方案。 p>

我在整个网站上添加了一个#wrapper，并将body和html中的 overflow：hidden; 移至#wrapper 。 

  #wrapper {
 height：100％; 
 overflow-x：hidden; 
}

然后我将#wrapper添加到jQuery选择器中

  $（。click）。click（function（）{
 $（'html，body，#wrapper'）。animate（{ scrollTop：0}，slow）; 
}）;

如果有人感兴趣，可以使用codePen： http://codepen.io/anon/pen/IwGcF



这似乎很适用Chrome手机，Chrome桌面和Firefox。


I'm getting some weird issues on my website in Chrome where if I have a body of 100% jquery page scrolling stops working. I can't remove body height:100% as this is needed to make the .header class 50% of the page. Firefox is not effected by this issue at all. I've looked at other similar questions but non help.

I've written up a test here: http://codepen.io/anon/pen/bIHxc.

.

I've tried these things to get it to work in chrome but each one stops something else from working:

  1. Current http://codepen.io/anon/pen/bIHxc - Header is 50% of page (good) but scrolling fails to work in Chrome (bad)

  2. tried min-height:100% instead of height:100% in body css - This allows scrolling to work in chrome (good) but collapses the header (bad)

  3. Change #mainContainer css from position: relative; to absolute - Both header and scrolling work (good) until you expand the #sidebar (click the Open button top left). The #mainContainer can now be moved freely especially noticeable on mobile or with a mac trackpad (very bad!). It looks as if overflow-x isn't working or something.

I'm trying to do this without javascript. Am I trying to do something impossible?

.

Stuff required by stackoverflow

<!DOCTYPE html>
<html>
    <head>    
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>        
<style>
  html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
html {
    height: 100%;
}
body {
    height: 100%;
}
#sideBar {
    background: red;
    position: fixed;
    height: 120%;
    width: 200px;
}
#mainContainer {
    -webkit-transition:transform 0.4s ease, margin 0.4s ease;
    -moz-transition:transform 0.4s ease, margin 0.4s ease;
    background: blue;
    z-index: 1000;
    position: relative;
    margin-left: 70px;
    height: 100%;
}
nav {
    width:100%;
    height: 100%;
    background:purple;
    position: relative;
    -webkit-transition:width 0.4s ease;
    -moz-transition:width 0.4s ease;
}
#mainNavCheck:checked ~ #mainContainer {
    -webkit-transform:translate3d(130px, 0, 0);
    -moz-transform:translate3d(130px, 0, 0);
}
#mainNavCheck:not(:checked) ~ #sideBar span {
    color:blue;
}
.content {
    background:grey;
}
.header {
    height: 50%;
    background: lime;
}
#mainNavCheck {
    position:absolute;
    left:-999px;
    visibility: hidden;
}
h1 {
    padding: 0;
    margin: 0;
}  
</style>
<head>        
<body>
<input type="checkbox" id="mainNavCheck" />
<div id="sideBar">
  <nav>
    <label for="mainNavCheck" class="togglemenu">OPEN</label>
    <div class="click">ScrollUp</div>
  </nav>
</div>
<div id="mainContainer">
  <div class="header">
    header - 50% height of browser window
  </div>
  <div class="content">
    <h1>This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. </h1>

    <div class="click">
      <br /><br /><br /><br /><br />
      ScrollUp
    </div>
  </div>
</div>
<script>
$(".click").click(function() {
  $('html, body').animate({ scrollTop: 0 }, "slow");
});
</script>    
</body>
</html>

解决方案

I think I've found a solution.

I've added a #wrapper around the whole website and moved overflow:hidden; from body and html to #wrapper.

#wrapper{
    height: 100%;
    overflow-x: hidden;
}

Then I added #wrapper to the jQuery selector

$(".click").click(function() {
  $('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});

Here is a codePen if anyone's interested: http://codepen.io/anon/pen/IwGcF

This seems to work well on Chrome mobile, Chrome desktop and firefox.

这篇关于jQuery滚动问题与身高100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆