ワイズリマインダー

MacOSでスクロールバーを常時表示させる

MacOSはオシャレなので、マウスオーバーしないとスクロールバーが表示されない
今回はオシャレを犠牲にしてスクロールバーを常時表示させてみた

div.scrollbar{
	width:300px;
	height:145px;
	overflow-y:scroll;
}
div.scrollbar::-webkit-scrollbar{
  width:17px;
}
div.scrollbar::-webkit-scrollbar-track-piece{
	background:#f1f1f1;
}
div.scrollbar::-webkit-scrollbar-button{
	width:17px;
	height:17px;
}
div.scrollbar::-webkit-scrollbar-button:start:decrement{
	display:block;
	background:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gMTAwCv/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIABEAEQMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP7iKq2N9ZanZWepabeWuoadqFrb31hf2NxFd2V9ZXcST2t5Z3UDyQXNrcwSRzW9xDI8U0TpJG7IyseP+I/gO3+JXhPUPB194j8T+G9L1fEOrXHhO702w1LUtNKSJc6NcXeo6Tq/laXf70GoxWcdtcXtvEdPuLl9Lu9RsbzB+EXwj0v4NaBceF9A8T+Mdd0F7o3mn6b4rv8ASNQi0KWVppL5NFk07Q9IntbXUp5RdXdjLLcWS3qy3tnb2l3f6pNfgHrFFFFABRRRQAUUUUAf/9k=);
}
div.scrollbar::-webkit-scrollbar-button:end:increment{
	display:block;
	background:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gMTAwCv/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIABEAEQMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP7V/HXj7wt8NtAk8UeMr+60vQYLq2s7nUrfRtc1qKzlvGaO2e+j0LTdTnsbWacJapfXcUNl9tuLOyNwLu9tIZ8z4d/FbwJ8V7LUdS8A6xda7p2lXUVje376B4j0iyW9liM/2O3utd0jTIL66hgMU15b2MlxLYxXVjJepAl/ZNP3V9Y2Wp2V5pupWdrqGnaha3Fjf2F9bxXdlfWV3E8F1Z3lrOkkFza3MEkkNxbzRvFNE7xyIyMynM8MeGNA8GaBpfhfwvpdroug6LarZ6bptmrCKCIM0kjvJI0k9zdXM8kt1fX11LPe397PcXt7cXF3cTTSAG7RRRQAUUUUAFFFFAH/2Q==);
}
div.scrollbar::-webkit-scrollbar-thumb{
	border:2px solid #f1f1f1;
	background-color:#c1c1c1;
}

<div class="scrollbar">智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。住みにくさが高こうじると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟さとった時、詩が生れて、画えが出来る。人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りょうどなりにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。</div>

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。