���̋L����CSS Advent Calendar 2022��9���ڂ̕��ł��B

CSS�̃{�b�N�X���f���ɂ����ẮA�{�[�_�[�̓��ӂƃp�f�B���O�̊O�ӂ̊ԂɃX�N���[���o�[���z�u����܂��B�ŋ߂͂ǂ�OS�ł��I�[�o�[���C�X�N���[���o�[�i�X�N���[���o�[�����e�̑O�ʂɕ������Ԃ���悤�Ȃ��́j���嗬�ƂȂ�A�X�N���[���o�[�����݂��Ă����Ȃ��Ă����e�̕����ς��Ȃ��悤�ɂȂ��Ă��܂��B����A�N���V�b�N�X�N���[���o�[�i�X�N���[���o�[����ɕ\�������悤�Ȃ��́j���g����‹��ł́Aoverflow: auto�ȗv�f�ɂ����ē��e���͂ݏo���Ƃ��Ƃ͂ݏo���Ȃ��Ƃ��œ��e�̕����ς���Ă��܂��B

�N���V�b�N�X�N���[���o�[���g����‹��ł����e�̕������ɕۂ������Ƃ����ꍇ�́Ascrollbar-gutter�v���p�e�B���g���܂��Bscrollbar-gutter: stable���w�肷��΁A�X�N���[���o�[���\������Ȃ��Ƃ��ł��X�N���[���o�[�Ɠ��������̗̈悪�m�ۂ���A���e�̕��͂��̕������Ȃ�܂��B���E�����ɔz�u�������̂ɃX�N���[���o�[�̗̈�̕���������č���Ƃ����Ƃ��́Ascrollbar-gutter: stable both-edges���w�肷�邱�ƂŁA���E�ǂ���ɂ��X�N���[���o�[�Ɠ��������̗̈悪�m�ۂ���܂��B

[�摜]

�i��}��Windows 10 Firefox nightly 109.0a1�ł̕\���j

scrollbar-gutter�v���p�e�B��overflow: hidden�ȗv�f�ɂ��K�p����܂����Aoverflow: visible�ȗv�f�ɂ͓K�p����܂���B�܂��Ascrollbar-gutter�v���p�e�B�̌��ʂ́A�c�X�N���[���o�[�i�c�����Ȃ牡�X�N���[���o�[�j�ɂ̂݉e�����܂��B

�I�[�o�[���C�X�N���[���o�[���g����‹��ł́Ascrollbar-gutter: stable�̌��ʂ͂���܂���B

�g�p����

�g�p����Ƃ��ẮA@about_hiroppy����̏Љ�Ă���uHTML��dialog�v�f�ɂ�郂�[�_���_�C�A���O���J���Ă���Ƃ��ɁA�w�i�̕������X�N���[�������Ȃ��v�Ƃ����̂��l�����܂��iscrollbar-gutter�v���p�e�B���w�肵�������w�肵�Ȃ��������j�B

html {
  scrollbar-gutter: stable;
}
html:has(dialog:modal) {
  overflow: hidden;
}

�N���V�b�N�X�N���[���o�[���g����‹��ł́A�������X�N���[�������Ȃ����߂�overflow: hidden���w�肷��ƁA�X�N���[���o�[�������ĕ����̓��e�������‚��Ă��܂��܂��Bscrollbar-gutter: stable�����炩���ߎw�肵�Ă����΁A�X�N���[���o�[�������Ă����̕��̗̈悪�m�ۂ��ꑱ����̂ŁA�����̓��e�������‚��܂���B