Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

scroll-margin

Description
Syntax
Examples
Links

Description

The scroll-margin CSS property is shorthand for all of the scroll-margin-* longhands.

Syntax

CSS

scroll-margin: value;

JS

object.style.scrollMargin = "value";

Values

<'scroll-margin'> = <length>{1,4}

<length>

Specifies the length using a number followed by a unit of measurement.

Initial

Examples

1 · length

2 · JS

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: grid;
            grid-template-columns: repeat(3, 100%);
            grid-template-rows: repeat(3, 100%);
            height: 50vh;
            overflow: scroll;
            scroll-snap-type: both mandatory;
            width: 50%;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            scroll-snap-align: start;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="20px">length</button><br>
    <button value="20px">top-right-bottom-left</button>
    <button value="20px 40px">top-bottom right-left</button>
    <button value="20px 40px 60px">top right-left bottom</button>
    <button value="20px 40px 60px 80px">top right bottom left</button>
    <div class="myclass">
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
        <div>scroll-margin</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            for(const mydiv of document.querySelectorAll(".myclass > div"))
            {
                mydiv.style.scrollMargin = myproperty;
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

Links

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

Properties

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

External

World Wide Web Consortium (W3C)

Overview

Search

Download

العربية

ASVD الكتاب المقدس ترجمة فانديك وسميث

česky

CSBKR Bible Kralická 1613

Dansk

DA1871 Danske Bibel 1871

Deutsch

DELUT Luther Bible 1912

ELB Elberfelder 1905

ELB71 Elberfelder 1871

English

ASV American Standard Version

KJV King James Version

WEB World English Bible

Español

RVES Reina-Valera Antigua

Suomi

FI1776 Finnish 1776

FINPR Finnish 1938

Français

FMAR Martin 1744

FRDBY Bible Darby en français

LSG Louis Segond 1910

Magyar

KAR Károli 1590

Bahasa Indonesia

IDBAR Terjemahan Baru

Italiano

IGD Giovanni Diodati Bibbia

ITRIV Italian Riveduta 1927

日本語

JA1955 Colloquial Japanese (1955)

Malagasy

MG1865 Malagasy Bible

te reo Māori

MAOR Maori Bible

한국어

KORVB 개역한글

Nederlands

SV1750 Statenvertaling

Norsk

NORSK Det Norsk Bibelselskap 1930

Polski

PBG Biblia Gdańska

Português

AA Almeida Atualizada

Română

RMNN Romanian Cornilescu 1928

VDC Versiunea Dumitru Cornilescu

VDCC Versiunea Dumitru Cornilescu Corectată

Pyccкий

RURSV Синодальный перевод

Shqip

ALBB Albanian Bible

Svenska

SK73 Karl XII 1873

SVEN Svenska 1917

Wikang Tagalog

TLAB Ang Biblia

українська

UBIO Біблія в пер. Івана Огієнка, 1962

UKRK Біблія в пер. П.Куліша та І.Пулюя, 1905

Tiếng Việt

VI1934 1934 Vietnamese Bible

简体中文

CUVS 简体和合本

繁體中文

Overview

Attributes

contenteditable

oncanplaythrough

oncontextrestored

ondurationchange

onlanguagechange

onloadedmetadata

popovertargetaction

Elements

Other

Overview

Functions

Properties

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

Pseudo-Classes

Pseudo-Elements

file-selector-button

Units

Overview

AbortController

AbortController

AbstractRange

AbortSignal

ChildNode

Comment

console

CustomEvent

Declarations

Document

DocumentFragment

DocumentFragment

DocumentOrShadowRoot

pictureInPictureElement

DOMImplementation

createDocumentType

createHTMLDocument

DOMTokenList

Element

Event

defaultPrevented

stopImmediatePropagation

stopPropagation

EventTarget

addEventListener

removeEventListener

HTMLCollection

HTMLDialogElement

HTMLVideoElement

autoPictureInPicture

disablePictureInPicture

requestPictureInPicture

Iterations

MutationObserver

MutationObserver

MutationRecord

attributeNamespace

previousSibling

Node

compareDocumentPosition

previousSibling

NodeList

NonDocumentTypeChildNode

nextElementSibling

previousElementSibling

NonElementParentNode

ParentNode

firstElementChild

lastElementChild

querySelectorAll

replaceChildren

Prompts

Range

commonAncestorContainer

createContextualFragment

Slottable

Statements

StaticRange

Text

Other

Overview

Array

array_change_key_case

array_count_values

array_diff_assoc

array_diff_uassoc

array_diff_ukey

array_fill_keys

array_intersect

array_intersect_assoc

array_intersect_key

array_intersect_uassoc

array_intersect_ukey

array_key_exists

array_key_first

array_merge_recursive

array_multisort

array_replace_recursive

array_udiff_assoc

array_udiff_uassoc

array_uintersect

array_uintersect_assoc

array_uintersect_uassoc

array_walk_recursive

Calendar

cal_days_in_month

Class / Object

get_called_class

get_class_methods

get_declared_classes

get_declared_interfaces

get_declared_traits

get_object_vars

get_parent_class

interface_exists

property_exists

Ctype

cURL

Date / Time

Directory

Error Handling

debug_backtrace

debug_print_backtrace

error_clear_last

error_reporting

restore_error_handler

restore_exception_handler

set_error_handler

set_exception_handler

Filesystem

Filter

filter_input_array

filter_var_array

Function Handling

call_user_func_array

forward_static_call

forward_static_call_array

function_exists

get_defined_functions

register_shutdown_function

register_tick_function

unregister_tick_function

Hash

hash_hmac_algos

hash_update_file

hash_update_stream

Image

getimagesizefromstring

image_type_to_extension

image_type_to_mime_type

imageaffinematrixconcat

imageaffinematrixget

imagealphablending

imagecolorallocate

imagecolorallocatealpha

imagecolorclosest

imagecolorclosestalpha

imagecolorclosesthwb

imagecolordeallocate

imagecolorexact

imagecolorexactalpha

imagecolormatch

imagecolorresolve

imagecolorresolvealpha

imagecolorsforindex

imagecolorstotal

imagecolortransparent

imageconvolution

imagecopymergegray

imagecopyresampled

imagecopyresized

imagecreatefromavif

imagecreatefrombmp

imagecreatefromgif

imagecreatefromjpeg

imagecreatefrompng

imagecreatefromstring

imagecreatefromtga

imagecreatefromwbmp

imagecreatefromwebp

imagecreatefromxbm

imagecreatefromxpm

imagecreatetruecolor

imagedashedline

imagefilledellipse

imagefilledpolygon

imagefilledrectangle

imagefilltoborder

imagefontheight

imagegammacorrect

imagegetinterpolation

imageistruecolor

imagelayereffect

imageopenpolygon

imagepalettecopy

imagepalettetotruecolor

imageresolution

imagesetinterpolation

imagesetthickness

imagetruecolortopalette

Mail

Math

Miscellaneous

Network

Options / Information

Output Control

ob_get_contents

ob_implicit_flush

ob_list_handlers

output_add_rewrite_var

output_reset_rewrite_vars

PCRE

preg_last_error

preg_replace_callback

preg_replace_callback_array

Random

Readline

readline_add_history

readline_callback_handler_install

readline_callback_handler_remove

readline_callback_read_char

readline_clear_history

readline_completion_function

readline_list_history

readline_on_new_line

readline_read_history

readline_redisplay

readline_write_history

Stream

stream_bucket_append

stream_bucket_make_writeable

stream_bucket_new

stream_bucket_prepend

stream_context_create

stream_context_get_default

stream_context_get_options

stream_context_get_params

stream_context_set_default

stream_context_set_option

stream_context_set_params

stream_copy_to_stream

stream_filter_append

stream_filter_prepend

stream_filter_register

stream_filter_remove

stream_get_contents

stream_get_filters

stream_get_line

stream_get_meta_data

stream_get_transports

stream_get_wrappers

stream_is_local

stream_notification_callback

stream_register_wrapper

stream_resolve_include_path

stream_set_blocking

stream_set_chunk_size

stream_set_read_buffer

stream_set_timeout

stream_set_write_buffer

stream_socket_accept

stream_socket_client

stream_socket_enable_crypto

stream_socket_get_name

stream_socket_pair

stream_socket_recvfrom

stream_socket_sendto

stream_socket_server

stream_socket_shutdown

stream_supports_lock

stream_wrapper_register

stream_wrapper_restore

stream_wrapper_unregister

String

convert_uudecode

convert_uuencode

get_html_translation_table

html_entity_decode

htmlspecialchars

htmlspecialchars_decode

quoted_printable_decode

quoted_printable_encode

str_starts_with

Tokenizer

URL

http_build_query

Variable Handling

Overview

Attributes

diffuseConstant

gradientTransform

limitingConeAngle

maskContentUnits

patternContentUnits

patternTransform

preserveAspectRatio

requiredExtensions

specularConstant

specularExponent

xChannelSelector

yChannelSelector

Elements

Values

auto-start-reverse

BackgroundAlpha

BackgroundImage

begin-value-list

filter-primitive-reference

length-percentage

list-of-numbers

luminanceToAlpha

no-referrer-when-downgrade

number-optional-number

objectBoundingBox

origin-when-cross-origin

set-of-comma-separated-tokens

set-of-space-separated-tokens

spacingAndGlyphs

strict-origin-when-cross-origin

use-credentials

Overview

Bible

Jesus Loves the Little Children

Merry Christmas

One Man. One Woman. One Lifetime.

The Armor of God

Cards

LEGO

LEGO Cannonball Bingo

LEGO Pandamonium

LEGO Pirate Plunder

LEGO The Machine

Other

Overview

Assets

Overview

Modifiers

Other

Overview

Objects

Other

Overview

Install

Example

Cameras

Core

Light

Materials

BitmapFileMaterial

BitmapViewportMaterial

CompositeMaterial

WireframeMaterial

Shade Materials

FlatShadeMaterial

GouraudMaterial

Special Material

ParticleMaterial

Parser Objects

Primitive Objects

Special Objects

Render

BasicRenderEngine

LazyRenderEngine

QuadrantRenderEngine

Scene

Typography

Views

View Layers

BitmapEffectLayer

Other

Camera Target Move

Overview

Plugins

Overview

Detect

Games

Unity

Overview

Example

CSV2Plist

UI

UIActivityIndicatorView

UISegmentedControl

Home