离子水平滚动 - 保持或将所选项目带入视图

Question

我在我的应用程序中使用水平滚动来选择菜单类别。

我使用了CodePen示例here，一切正常。

我已经实现了向左/向右滑动以在类别之间切换，但是如果我在屏幕外的某个类别，我希望它显示，而不是隐藏在右侧/左侧。

如何以编程方式（或通过CSS）确保在滚动到视图中时始终可以看到所选项目（由类定义）？

以下是选定类别在视图中的样子（从CSS类加粗）的示例

以下是向右滑动直到选择了屏幕外的类别的结果示例。

水平滚动条的代码如下

    <div class="bar bar-sub-header item-input-inset">
        <ion-scroll direction="x" class="wide-as-needed">
            <button ng-repeat="category in model.selectedMenu.categories"
                ng-click="selectCategory(category)"
                ng-style="model.selectedCategory.id == category.id && {'font-weight': 'bold'}"
                class="button button-clear category">
                {{category.name | uppercase}}
            </button>
      </ion-scroll>
    </div>

使用的CSS类如下：

.wide-as-needed {   溢出：滚动;   白色空间：nowrap; }