Prevent ribble effect on touch

Hi there,

the current behavior e.g. for a list is that there is a ribble effect when i´m clicking on an ion-item. But there is also the effect when im scrolling through the list (on a mobile device) and need to touch the screen to scroll. There is also a ribble effect.

Is there a way to disable the ribble effect on touch and keep it only for click (e.g. with routerLink)?

hi @monaco05 please try this example

<ion-list>
          <ion-item class="custom-ripple">
            <ion-label>check box</ion-label>
            <ion-checkbox slot="end" ></ion-checkbox>
          </ion-item>
        </ion-list>
.custom-ripple{
        --ripple-color: transparent;
        --background-hover: transparent;
    }

this works to disable the ribble effect but also for the real click event.
I want to achieve a behavior like the chat list on WhatsApp on Android

in your case try this

.custom-ripple{
        --ripple-color: transparent;
        --background-hover: transparent;
    }
    .custom-ripple:active{
        --ripple-color: #656363;
        --background-hover: #656363;
    }