Hide scroll bar in android app

Discussed in https://github.com/ionic-team/capacitor/discussions/5416

<div type='discussions-op-text'>

^{Originally posted by mohammad0-0ahmad February 8, 2022} Hello!

I’ve tried to hide the scroll bar in Android app that is created by using capacitor and next.js and I couldn’t do so in web source code. I ended up to modify @capacitor\android\capacitor\src\main\java\com\getcapacitor\CapacitorWebView.java file by adding the following line inside constructure function:

    public CapacitorWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
   +     setVerticalScrollBarEnabled(false);
    }

That line could hide the scrollbar but I wonder if I can hide it from my source code instead because I couldn’t find a solution for that in the docs.

Best regardes.

</div>

[jcesarmobile]

You can create a plugin and put this code in the load method

public void load() {
    bridge.getWebView().setVerticalScrollBarEnabled(false);
}

Or without a plugin you can put this code in the MainActivity.java

    @Override
    public void onStart() {
        super.onStart();
        bridge.getWebView().setVerticalScrollBarEnabled(false);
    }

[ThinhVu]

/* Hide scrollbar for IE, Edge and Firefox / .hide-scroll-bar { -ms-overflow-style: none; / IE and Edge / scrollbar-width: none; / Firefox / } / Hide scrollbar for Chrome, Safari and Opera */ .hide-scroll-bar::-webkit-scrollbar { display: none; }

Thanks for your answer, but does this work with MUI? With other words, I am not using ionic-ui “components” solution

It’s CSS and it should work on any device, unless the CapacitorJS team does something weird with their custom web browser.

I’m not sure about that. But I think you should try it.

Note that the code above create hide-scroll-bar class and you need to add this class to the element you want the scroll bars to be hidden. If you want to hide scroll bars for entire app, using * selector instead.