Ionic 2:隐藏滚动条并继续滚动

Ionic 2: Hide scroll-bar and keep scrolling(Ionic 2:隐藏滚动条并继续滚动)
本文介绍了Ionic 2:隐藏滚动条并继续滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我只想在需要滚动的页面中隐藏滚动条.我正在使用离子 2

I just want to hide the scrollbar, in a page that needs scrolling. I am using Ionic 2

我的不起作用解决方案:

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

此解决方案隐藏滚动条使屏幕无法滚动.

This solution hide the scroll-bar but makes the screen unscrollable.

推荐答案

首先,改变浏览器的自然行为和预期的用户体验是一个冒险的举动.

First and foremost, changing natural behavior of the browser and expected user experience is a risky move.

但是,如果您仍然真的很想这样做,我认为您最好的选择是伪造它.在这种情况下,将 width 设置为 0 就足够了,但我还将背景颜色更改为完全透明.

However, if you still really really want to, I think your best bet is to fake it. In this case, setting width to 0 should be enough but I'm also changing background colors to be completely transparent.

div{
  background: gray;
  height: 200px;
  overflow-y: scroll;
}

p{
  border-bottom: 1px solid black;
}

div::-webkit-scrollbar {
  border:none;
  width:0;
  background: rgba(0,0,0,0);
}
 
div::-webkit-scrollbar-track {
  border:none;
  width:0;
  background: rgba(0,0,0,0);
}
 
div::-webkit-scrollbar-thumb {
  border:none;
  width:0;
  background: rgba(0,0,0,0);
}

<div>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>

这篇关于Ionic 2:隐藏滚动条并继续滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)
Put in bold part of description in metatag Drupal module(将描述的粗体部分放在元标记 Drupal 模块中)