我在移动设备/尺寸的页面底部有position: fixed
导航栏。导航栏本身有一个溢出容器,用户可以向右滚动以查看其他链接(这是一个设计请求,在我看来,用户体验不佳,但那是我的2美分)。
我在iOS设备上测试时遇到的问题是,当顶部/底部本机浏览器元素不在屏幕上时,滚动/任何链接点击都不可用。换句话说,当这些元素自动隐藏时,固定行为根本不起作用。我已经在下面创建了一个小提琴,并且还包含了相关代码的片段,以防万一在iOS上正确查看小提琴的任何问题:
Fiddle showing the behavior in question
.sticky-nav {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 90;
background-color: #ddd;
border-top: 1px solid #f8f8f8;
overflow: hidden;
}
.sticky-nav-inner {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 57px;
max-width: 1200px;
margin: 0 auto;
z-index: 0;
}
.sticky-nav-menu {
display: inline-block;
white-space: nowrap;
padding-right: 25px;
margin: 0;
}
.sticky-nav-menu li {
display: inline-block;
white-space: nowrap;
margin-right: 25px;
padding-top: 20px;
}
.sticky-nav-overflow {
width: calc(100% - 100px);
height: 100%;
margin-right: 2%;
overflow-x: scroll;
}
.sticky-nav-mobile {
padding-left: 1%;
z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pane-container">
<nav class="sticky-nav js-sticky-nav clearfix">
<div class="sticky-nav-inner">
<div class="sticky-nav-overflow">
<ul role="tablist" class="sticky-nav-menu is-centered-text">
<li role="presentation" class="active"><a href="#linkone" aria-controls="linkone" role="tab" data-toggle="tab" class="sticky-nav-link">LINK ONE</a></li>
<li role="presentation"><a href="#linktwo" aria-controls="linktwo" role="tab" data-toggle="tab" class="sticky-nav-link">LINK TWO</a></li>
<li role="presentation"><a href="#linkthree" aria-controls="linkthree" role="tab" data-toggle="tab" class="sticky-nav-link">LINK THREE</a></li>
<li role="presentation" class="sticky-nav-animated-list"><a href="#linkfour" aria-controls="linkfour" role="tab" data-toggle="tab" class="sticky-nav-link">LINK FOUR</a></li>
</ul>
</div>
<div class="sticky-nav-mobile">
<a href="#" class="sticky-nav-cta call-button">BUY NOW</a>
</div>
</div>
</nav>
<div class="tab-content">
<div id="linkone" role="tabpanel" class="grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active">
<h1>Link one pane</h1>
</div>
<div id="linktwo" role="tab-panel" class="grid-container grid-parent linktwo-pane is-centered-text tab-pane fade">
<h1>Link two pane</h1>
</div>
<div id="linkthree" role="tab-panel" class="grid-container grid-parent linkthree-pane is-centered-text tab-pane fade">
<h1>Link three pane</h1>
</div>
<div id="linkfour" role="tab-panel" class="grid-container grid-parent linkfour-pane is-centered-text tab-pane fade">
<h1>Link four pane</h1>
</div>
</div>
</div>
&#13;
我尝试了一些替代方法,例如-webkit-overflow-scrolling
没有运气。我觉得这个问题是无关紧要的。似乎甚至没有注册屏幕的那个区域而没有被iOS上的原生底栏向上推。
非常感谢任何和所有的帮助。只是耗尽了我自己尝试的想法。我希望用最少的JavaScript来实现这一目标,但我完全不反对。谢谢你的帮助!
答案 0 :(得分:8)
取自here。
使用溢出时:滚动;属性,-webkit-overflow-scrolling:touch;属性在移动网站上非常有用。它基本上将尴尬的滚动行为改变为正常的预期行为。
使用-webkit-overflow-scrolling动态向div添加内容时:touch;超过div的高度,它变得破碎和不可滚动。您可以通过不断设置内部div来解决这个问题,因为它比外部div高1px:
.outer {
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* More properties for a fixed height ... */
}
.inner {
height: calc(100% + 1px);
}
我没有测试过它。
答案 1 :(得分:1)
好吧,我能够解决这个问题(这有点奇怪)。出于某种原因,将导航器固定在最底部似乎是个问题。为了解决这个问题,我使用bottom
属性添加了额外的空间,并添加了一个伪元素来填补空白。然后,增加滚动容器内的链接元件的高度。这是更新后的代码:
.sticky-nav {
position: fixed;
width: 100%;
padding-top: 10px;
bottom: 10px;
left: 0;
z-index: 90;
background-color: #ddd;
border-top: 1px solid #f8f8f8;
}
.sticky-nav:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -10px;
left: 0;
background-color: #ddd;
}
.sticky-nav-inner {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 57px;
max-width: 1200px;
margin: 0 auto;
z-index: 0;
}
.sticky-nav-menu {
display: inline-block;
white-space: nowrap;
height: 100%;
padding-right: 25px;
margin: 0;
}
.sticky-nav-menu li {
display: inline-block;
white-space: nowrap;
height: 100%;
}
.sticky-nav-menu li a {
display: inline-block;
height: 100%;
padding-top: 20px;
padding-right: 25px;
}
.sticky-nav-overflow {
width: calc(100% - 100px);
height: 100%;
margin-right: 2%;
overflow-x: scroll;
}
.sticky-nav-mobile {
padding-left: 1%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pane-container">
<nav class="sticky-nav js-sticky-nav clearfix">
<div class="sticky-nav-inner">
<div class="sticky-nav-overflow">
<ul role="tablist" class="sticky-nav-menu is-centered-text">
<li role="presentation" class="active"><a href="#linkone" aria-controls="linkone" role="tab" data-toggle="tab" class="sticky-nav-link">LINK ONE</a></li>
<li role="presentation"><a href="#linktwo" aria-controls="linktwo" role="tab" data-toggle="tab" class="sticky-nav-link">LINK TWO</a></li>
<li role="presentation"><a href="#linkthree" aria-controls="linkthree" role="tab" data-toggle="tab" class="sticky-nav-link">LINK THREE</a></li>
<li role="presentation" class="sticky-nav-animated-list"><a href="#linkfour" aria-controls="linkfour" role="tab" data-toggle="tab" class="sticky-nav-link">LINK FOUR</a></li>
</ul>
</div>
<div class="sticky-nav-mobile">
<a href="#" class="sticky-nav-cta call-button">BUY NOW</a>
</div>
</div>
</nav>
<div class="tab-content">
<div id="linkone" role="tabpanel" class="grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active">
<h1>Link one pane</h1>
</div>
<div id="linktwo" role="tab-panel" class="grid-container grid-parent linktwo-pane is-centered-text tab-pane fade">
<h1>Link two pane</h1>
</div>
<div id="linkthree" role="tab-panel" class="grid-container grid-parent linkthree-pane is-centered-text tab-pane fade">
<h1>Link three pane</h1>
</div>
<div id="linkfour" role="tab-panel" class="grid-container grid-parent linkfour-pane is-centered-text tab-pane fade">
<h1>Link four pane</h1>
</div>
</div>
</div>
答案 2 :(得分:0)
当苹果发布iOS10时,我遇到了同样的问题。你的解决方案就是我所需要的!我的应用程序中的页脚(用流星制作,在带有ios 10的iphone 7上运行)没有粘在底部。但是我能够用更短的版本来解决它。
在我的页脚div
上我放了一个position: fixed; and bottom: 0px;
的课程
在执行bottom: 0;
时,我的页脚位于内容的底部而未修复。
我希望这可以帮助其他人解决同样的问题
答案 3 :(得分:0)
在iOS上,浏览器(Safari,Chrome)错误计算在DOM加载后动态添加的内容宽度。例如,在桌面上使用pagination.js并不允许在移动iOS设备上滚动。解决方法是在更改内容后添加此css:
min-height:1000px
答案 4 :(得分:0)
这就是我为解决问题所做的工作
尝试检测滚动是否已停止。滚动停止后,然后设置位置:固定在页眉/页脚上。
var scrollStop = function (callback) {
// Make sure a valid callback was provided
if (!callback || Object.prototype.toString.call(callback) !== '[object Function]') return;
// Setup scrolling variable
var isScrolling;
// Listen for scroll events
window.addEventListener('scroll', function (event) {
// Clear our timeout throughout the scroll
$("header").css("position","absolute");
window.clearTimeout(isScrolling);
// Set a timeout to run after scrolling ends
isScrolling = setTimeout(function () {
// Run the callback
callback();
}, 66);
}, false);
};
// Example
scrollStop(function () {
$("header").css("position","fixed");
console.log("Swami scrolling has stopped");
});