删除微小的滚动条 - Ionic 3答案

【问题标题】：Remove tiny scroll bar - Ionic 3删除微小的滚动条 - Ionic 3
【发布时间】：2017-11-13 12:04:21
【问题描述】：

您可以看到有一个小滚动条，如下所示。您能告诉我如何删除它吗？这是Ionic 3 应用程序。我尝试了很多方法。但还没有运气。

请看看它在设备上有多糟糕:(

浏览器上的这个：

.sass

 .height-70 {
        height: 70px;
        overflow: hidden;
    }

.html

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col class="height-70" col-12>
        <ion-content>
          <button ion-button icon-left full (click)="loginWithLinkedin()" class="background-color-linkedin"><ion-icon name="logo-linkedin" class="margin-top-minus-4"></ion-icon><span>Continue with Linkedin</span></button>
        </ion-content>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Chrome css(run time): below padding:16px 是问题。但我怎样才能删除它？因为我也需要填充。有什么解决方法吗？

【问题讨论】：

overflow: hiddenCSS overflow property
它不工作不是吗？放在哪里？ @PatrickMlr
“放在哪里？”这取决于哪个元素导致滚动条。使用浏览器调试工具检查它可以更改@PatrickMlr 提到的特定类
我在所有我能想到的地方都做到了。但没有运气。我已经把它和我的问题放在了一个位置。请看它。@ShanilFernando
你为什么在 ion-col 中使用 ion-content？

标签： css ionic-framework sass ionic2 ionic3

【解决方案1】：

.scroll-content {
    overflow-y: hidden;
}

【讨论】：

我不知道为什么这个答案没有投票，但它对我有用！谢谢
感谢您的反馈，这很重要。

【解决方案2】：

如果您在ion-col 中使用ion-content，它将添加来自scroll-content 的一些属性。 用 div 替换 ion-content 并手动将您想要的所有 css 属性添加到您的 div。

【讨论】：

我什至不确定为什么需要 div，因为 ion-col 本身就是一个容器，但这更像是帖子所有者的问题。 +1 因为我也认为 ion-content 不应该放在那里。
非常好。谢谢 :)
Joao Mello 的回答不需要引入/替换 div 等其他元素

【解决方案3】：

试试/src/app/下的这个文件app.scss

[scrollbar-y-auto] .scroll-content {
  overflow-y: false !important;
}

和你的代码：

<ion-content scrollbar-y-auto>

未测试检查并告诉我

【讨论】：

不工作，也没有在 chrome 上生成任何东西？
感谢这项工作非常适合我。我只需要将 false 更改为“隐藏”:)

【解决方案4】：

试试下面的，

<ion-content overflow-scroll="false">

1.反弹，

<ion-content no-bounce></ion-content>

2.

.content > .scroll-content::before {
    bottom: 0;
}

.content > .scroll-content::after {
    top: 0;
}

3.

.scroll-content {
   overflow-y: auto !important;
}

4.

<ion-content>
   <div ion-fixed>
   </div>
</ion-content>

【讨论】：

否。仍然无法正常工作。您的属性不会在 chrome 上生成任何 CSS。为什么？
添加了一些尝试一下，我不太确定使用 ionic3

【解决方案5】：

我的经验是有时您会在浏览器中看到滚动条，但在设备上却看不到。我建议您在设备中验证相同的内容，或者通过按Ctrl+Shift+M 在开发工具中尝试使用 chrome 设备模拟器。

【讨论】：

您可以尝试从ion-col 中删除height-70 类，如果您需要按钮之间的垂直间距（如图所示）添加具有一定高度的空白div。