UGUI's ScrollRect can correctly trim UGUI's own components including Image, Text, etc., but can't correctly crop ParticleSystem particles, which causes great trouble for the client and artists. Today we solve the cropping problem by modifying the shader.

Environmental construction

1. Create a new scene, add a ScrollView, and replace the Mask of the child object Viewport with Rect Mask 2D (Important)
2. Create a UI camera, modify Projection to Orthographic, and use Culling Mask to select only UI.
3. Modify Canvas's RenderMode to Screen-Space Camera and bind the camera created in 2
4. Add a ParticleSystem under the content of the ScrollView
   
5. run
   It can be seen that the particles are penetrating from the edge of the ScrollView.
   

Modify Unity native particle shader

1. Download the corresponding version of UnityShader code(If the link is invalid, you can go directly to Unity's official website to find the download), I am using the version of force 5.5.1
2. Open and navigate to the Particle Add.shader file, copy a copy named UIParticleAdditiveClip.shader to the Asset folder.
3. Modify the name of the shader in UIParticleAdditiveClip.shader to "Custom/UI/Particle_Additive_Clip"
4. Create a Material named pt, and use the shader created in 3, select any image as the image of the particle, and replace the default material of the ParticleSystem with pt.
   

At this point, running the program, I still can't see any effect, because there is no clipping area in our shader, that is, we need to tell the GPU which particles in the area need to be displayed, and the particles outside the area do not need to be displayed. For this, we Add variables to the shader

   float4 _ClipRect;

This variable is used to save 2 points in the lower left corner and upper right corner of the 2D crop box, for a total of 4 float values. In order to simplify the calculation, we set the coordinates stored in this variable to be in the world space, and limit the parallelism of the camera to the positive direction of the vertebral body toward the Z axis.

Next, we need to calculate the world coordinates of the particles in the vertex shader. Since we only need the xy coordinates of the vertices in the world space, I save these two coordinates to the zw of the uv coordinates. The code is as follows:

...
 // UnityUI.cginc contains the implementation of UnityGet2DClipping
#include "UnityUI.cginc"
...
struct v2f 
{
  ...
     / / Extend texcoord to float4, which will make the shader code compile error, then just change the error location to texcoord.xy
  float4 texcoord : TEXCOORD0;    
  ...
};
...
v2f vert(appdata_t v)
{
  ...
     // The original uv coordinates are saved to texcoord.xy, and the xy coordinates in world space are saved to o.texcoord.zw
  o.texcoord.xy = TRANSFORM_TEX(v.texcoord.xy,_MainTex).xy;
  o.texcoord.zw = mul(unity_ObjectToWorld, v.vertex).xy;
  ...
  return o;
}
 // C# code needs to pass the clipping region variable, here we add a variable (_UseClipRect) to mark whether it needs to be cropped
float4 _ClipRect;
float _UseClipRect;
...
fixed4 frag(v2f i) : SV_Target
{
  ...
     // The fragment shader is very simple, we only need to crop the fragment at the end.
     // UnityGet2DClipping is a function that determines whether a point in 2D space is in a rectangular area.
     // The lerp function is used to mark whether clipping is required. When the value of _UseClipRect is 1, it indicates clipping.
  float c = UnityGet2DClipping(i.texcoord.zw, _ClipRect);
  col.a = lerp(col.a, c * col.a, _UseClipRect);
  return col;
}

Write C# code to calculate the crop area

[RequireComponent(typeof(ParticleSystem))]
public class ParticleMask : MonoBehaviour
{
   public RectMask2D mask;
   public Material mt;
   private void Awake()
   {
       mt = GetComponent<ParticleSystem>().GetComponent<Renderer>().material;
       mask = GetComponentInParent<RectMask2D>();
       // Recalculate the crop area when the ScrollView position changes
       GetComponentInParent<ScrollRect>().onValueChanged.AddListener((e) => { setClip(); });
       setClip();
   }

   void setClip()
   {
       Vector3[] wc = new Vector3[4];
               mask.GetComponent<RectTransform>().GetWorldCorners(wc); // Calculate the point coordinates in world space
               Var clipRect = new Vector4(wc[0].x, wc[0].y, wc[2].x, wc[2].y);// Select the lower left and upper right corners
               mt.SetVector("_ClipRect", clipRect); // Set the crop area
               mt.SetFloat("_UseClipRect", 1.0f); // Turn on cropping
   }
}

Once the code is complete, bind this code to the ParticleSystem.

final effect

You can see that the particles are correctly cropped.

postscript

1. In general, the particle effects of the art production will contain multiple ParticleSystems. In this case, you need to get all the materil of the ParticleSystem to set the cropping area and the cropping switch respectively.
2. This kind of clipping method has certain limitations. It needs to modify the UI's native shader and limit the use of the art shader. In general, it only applies to small special effects on the interface, such as selection, skill highlighting, etc.
3. The Mask of the ScrollView created by right-clicking in Unity is not a Rect Mask 2D and needs to be modified manually.