Question

我有一个包含图片的水平滚动条：

<ion-view class="menu-content" view-title="Filter">
    <ion-content overflow-scroll="true">
        <div class="filter-examples">
            <img class="filter-examples-img" ng-repeat="filter in filters" ng-src="{{filter.image}}" />
        </div>
    </ion-content>
</ion-view>

使用以下css滚动工作非常好：

.filter-examples {
    overflow: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.filter-examples-img {
    margin: 0 auto;
    padding: 2px 2px 2px 2px;
    height: 150px;
}

问题是它被贴在了顶端。我希望它在底部，所以我尝试了这个：

.filter-examples {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

现在它粘在页面底部，但水平滚动不再起作用了。如何在不消除滚动的情况下将其粘在底部？

添加

A CodePen

Answer 1

您可以通过向图片容器添加100％的宽度来修复它

.wide-as-needed {
  ...
  width:100%;
}

演示：http://codepen.io/anon/pen/EVYqwm

位置绝对/固定时水平滚动不起作用

1 个答案: