CSS scroll-margin-right property

Last Updated : 25 Jul, 2024

The scroll-margin-right property is used to set all the scroll margins to the right of an element at once. The value specified for the scroll-margin-right determines how much of the page that is primarily outside the support should remain visible.

Hence, the scroll-margin-right values represent outsets that define the scroll snap area that is used for snapping this box to the support.

Syntax:

scroll-margin-right: length
/* Or */
scroll-margin-right: Global_Value

Property values: This property accepts two-properties mentioned above and described below:

length: This property refers to the values defined with length units exp: px, em, vh, etc.
Global_Values: This property refers to the global values like inherit, initial, unset, etc.

Note: scroll-margin-right doesn’t accept percentage value as the length.

Example: In this example, you can see the effect of scroll-margin-right by scrolling to a point partway between two of the “interfaces” of the example’s content.

HTML

<!DOCTYPE html>
<html>
  
<head>
	<style>
		img {
			width:300px;
			height:280px;
			scroll-snap-align: none end;
		}
		.Gallery {
			width: 300px;
			height:300px;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			scroll-snap-type: x mandatory;
		}
	</style>
</head>
<body>
	<div class="photoGallery">
		<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
		style="scroll-margin-right: 50px;">
		<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg" 
		style="scroll-margin-right: 60px;">
		<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png" 
		style="scroll-margin-right: -50px;">
	</div>
</body>
  
</html>