CSS 如何使用离子滚动并在上面固定内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36967780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll with ionic and have fixed content above
提问by JD.
I have the following view:
我有以下观点：
<ion-view ng-controller="recentDetailCtrl as vm">
<ion-content class="has-header">
<div style="padding:0px;">
<my-video video-url='vm.videoUrl'
player-width="'100%'" player-height="'180px'"></my-video>
</div>
<ion-scroll>
<ion-list>
<ion-item ng-repeat="comment in vm.comments">
{{comment.text}}
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
</ion-view>
What I want is my list of comments to scroll but always have the video element fixed (so it stays scrolling below the video - similar to they way the mobile youtube app allows you scroll comments with the playing video fixed).
我想要的是我要滚动的评论列表，但始终固定视频元素（因此它保持在视频下方滚动 - 类似于移动 youtube 应用程序允许您在播放视频时滚动评论的方式）。
Currently when I scroll the video is moved up out of view.
目前，当我滚动视频时，视频被移到了视野之外。
回答by Stathis Ntonas
You can use ion-fixed: (Ionic 3.5.0)
您可以使用ion-fixed：（离子 3.5.0）
<ion-content no-padding>
<div ion-fixed class="map"></div>
<div ion-fixed class="test_class">
<h4>Bla Bla</h4>
</div>
<ion-list>
<ion-item>
<p>Test</p>
</ion-item>
</ion-list>
</ion-content>
Then on css:
然后在css上：
.map {
width: 100%;
overflow: hidden;
height: 30%;
}
.test_class {
width: 100%;
height: 30px;
top: 30%;
}
Ionic documentation has no reference on this one, yet.
离子文档还没有关于这个的参考。
回答by Kevin
- Move your video directive out of ion-content (all elements in ion-content will be scrolled).
- Change the css of ion-content so that it does not occupy the upper half of the screen.
- Add
position:fixedand other css to your video directive, so that it takes up the upper half of your screen.
- 将您的视频指令移出 ion-content（将滚动 ion-content 中的所有元素）。
- 更改 ion-content 的 css，使其不占据屏幕的上半部分。
- 将
position:fixed和其他 css添加到您的视频指令中，使其占据屏幕的上半部分。
HTML:
HTML：
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Fixed Element at Top</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Fixed Element at Top</h1>
</ion-header-bar>
<div class="fixed-header my-video">
My fixed video content
</div>
<ion-content class="ion-content-below-my-video">
<ion-list>
<ion-item>1</ion-item>
<ion-item>2</ion-item>
<ion-item>3</ion-item>
<ion-item>4</ion-item>
<ion-item>5</ion-item>
<ion-item>6</ion-item>
<ion-item>7</ion-item>
<ion-item>8</ion-item>
<ion-item>9</ion-item>
<ion-item>0</ion-item>
<ion-item>1</ion-item>
<ion-item>2</ion-item>
<ion-item>3</ion-item>
<ion-item>4</ion-item>
<ion-item>5</ion-item>
<ion-item>6</ion-item>
<ion-item>7</ion-item>
<ion-item>8</ion-item>
<ion-item>9</ion-item>
<ion-item>0</ion-item>
</ion-list>
</ion-content>
</body>
</html>
CSS:
CSS：
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.fixed-header{
margin-top:43px;
/*
The ionic header bar is 43px in height,
put your content below the header bar.
*/
}
.platform-webview.platform-ios.platform-cordova .fixed-header{
margin-top:63px;
/* On iOS, moving a div out of ion-content,
I think you need to compensation for the 20px system status bar.
so it's 43px+20px=63px. but I'm not so sure, it hasn't been tested.
Test it yourself and make modifications if needed.
*/
}
.my-video
{
height:200px;
width:100%;
position:absolute;
background:grey;
color:red;
text-align:center;
padding:20px;
}
.ion-content-below-my-video{
margin-top:200px!important;
}
.platform-webview.platform-ios.platform-cordova .ion-content-below-my-video{
margin-top:220px;
/*
Same as .fixed-header
*/
}
Code pen here:
代码笔在这里：
回答by maczos
There is now in Ionic attribute slot. You can use it like that:
现在有 Ionic 属性slot。你可以这样使用它：
<my-video slot="fixed"></my-video>
<my-video slot="fixed"></my-video>
It's shortly mentioned on Ionic documentation here:
https://ionicframework.com/docs/api/content#slots
它在这里的 Ionic 文档中简短地提到：https:
//ionicframework.com/docs/api/content#slots
回答by M.M
回答by Sunil
I have the same use case. Moving the video content out of ion-content did the trick.
我有相同的用例。将视频内容从离子内容中移出就行了。
