ufologist/ignore-browser-scrollbar-width.html

## ignore-browser-scrollbar-width.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Ignore" browser scrollbar width on PC</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
    .container {
        width: 300px;
        height: 150px;
        overflow: auto;
        background-color: #ddd;
        -webkit-overflow-scrolling: touch; /* 测试手机浏览器上滚动条不会占据空间 */
    }
    .content {
        background-color: #bbb;
    }
    .pull-right {
        float: right;
    }

    /* 限定内层元素的最大宽度以预留出滚动条的宽度 */
    .container.ignore-scrollbar--fix-max-width .content {
        max-width: 283px;
        max-width: calc(300px - 17px); /* 父元素宽度 - 滚动条宽度 */
    }

    .container.ignore-scrollbar--fix-min-width {
        overflow-x: hidden; /* 由于内层内容宽度 + 滚动条宽度超过外层宽度, 导致水平方向溢出出现水平滚动条 */
    }
    /* 让内层元素的最小宽度占满父元素, 通过 padding 预留出滚动条的宽度 */
    .container.ignore-scrollbar--fix-min-width .content {
        min-width: 300px;       /* 父元素宽度 */
        padding-right: 17px;    /* 滚动条宽度 */
        box-sizing: border-box; /* 让元素宽度包含 padding, 否则元素会被滚动条遮挡 */
    }
    </style>
</head>
<body>
    <h1>"Ignore" browser scrollbar width on PC</h1>
    <p>
        <strong>Problem: Button2 is pushed by scrollbar</strong>
        <br>
        Because: Scrollbar reduce content width. without scrollbar: <code>314px</code>; with scrollbar: <code>297px</code>;
        <br>
        PS: Mobile browser scrollbar does not reduce content width.
        <br>
        <a href="https://www.douban.com/note/548331665/">滚动条君请别来挤我的界面</a>
    </p>
    <div>
        <button class="js-addcontent">add content</button> <button class="js-removecontents">remove contents</button>
    </div>
    <br>
    <div class="container">
        <div class="content">
            <h2>default problem</h2>
            <div><button>button1</button><button class="pull-right">button2</button></div>
        </div>
    </div>
    <br>
    <div class="container ignore-scrollbar--fix-max-width">
        <div class="content">
            <h2>fix max-width</h2>
            <div><button>button1</button><button class="pull-right">button2</button></div>
        </div>
    </div>
    <br>
    <div class="container ignore-scrollbar--fix-min-width">
        <div class="content">
            <h2>fix min-width</h2>
            <div><button>button1</button><button class="pull-right">button2</button></div>
        </div>
    </div>
    <script>
    document.querySelector('.js-addcontent').addEventListener('click', function() {
        [].slice.apply(document.querySelectorAll('.content')).forEach(function(el) {
            var p = document.createElement('p');
            p.appendChild(document.createTextNode('content'));
            el.appendChild(p);
        });
    }, false);
    document.querySelector('.js-removecontents').addEventListener('click', function() {
        [].slice.apply(document.querySelectorAll('.content p')).forEach(function(el) {
            el.parentNode.removeChild(el);
        });
    }, false);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>"Ignore" browser scrollbar width on PC</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
	.container {
	width: 300px;
	height: 150px;
	overflow: auto;
	background-color: #ddd;
	-webkit-overflow-scrolling: touch; /* 测试手机浏览器上滚动条不会占据空间 */
	}
	.content {
	background-color: #bbb;
	}
	.pull-right {
	float: right;
	}

	/* 限定内层元素的最大宽度以预留出滚动条的宽度 */
	.container.ignore-scrollbar--fix-max-width .content {
	max-width: 283px;
	max-width: calc(300px - 17px); /* 父元素宽度 - 滚动条宽度 */
	}

	.container.ignore-scrollbar--fix-min-width {
	overflow-x: hidden; /* 由于内层内容宽度 + 滚动条宽度超过外层宽度, 导致水平方向溢出出现水平滚动条 */
	}
	/* 让内层元素的最小宽度占满父元素, 通过 padding 预留出滚动条的宽度 */
	.container.ignore-scrollbar--fix-min-width .content {
	min-width: 300px; /* 父元素宽度 */
	padding-right: 17px; /* 滚动条宽度 */
	box-sizing: border-box; /* 让元素宽度包含 padding, 否则元素会被滚动条遮挡 */
	}
	</style>
	</head>
	<body>
	<h1>"Ignore" browser scrollbar width on PC</h1>
	<p>
	<strong>Problem: Button2 is pushed by scrollbar</strong>
	<br>
	Because: Scrollbar reduce content width. without scrollbar: <code>314px</code>; with scrollbar: <code>297px</code>;
	<br>
	PS: Mobile browser scrollbar does not reduce content width.
	<br>
	<a href="https://www.douban.com/note/548331665/">滚动条君请别来挤我的界面</a>
	</p>
	<div>
	<button class="js-addcontent">add content</button> <button class="js-removecontents">remove contents</button>
	</div>
	<br>
	<div class="container">
	<div class="content">
	<h2>default problem</h2>
	<div><button>button1</button><button class="pull-right">button2</button></div>
	</div>
	</div>
	<br>
	<div class="container ignore-scrollbar--fix-max-width">
	<div class="content">
	<h2>fix max-width</h2>
	<div><button>button1</button><button class="pull-right">button2</button></div>
	</div>
	</div>
	<br>
	<div class="container ignore-scrollbar--fix-min-width">
	<div class="content">
	<h2>fix min-width</h2>
	<div><button>button1</button><button class="pull-right">button2</button></div>
	</div>
	</div>
	<script>
	document.querySelector('.js-addcontent').addEventListener('click', function() {
	[].slice.apply(document.querySelectorAll('.content')).forEach(function(el) {
	var p = document.createElement('p');
	p.appendChild(document.createTextNode('content'));
	el.appendChild(p);
	});
	}, false);
	document.querySelector('.js-removecontents').addEventListener('click', function() {
	[].slice.apply(document.querySelectorAll('.content p')).forEach(function(el) {
	el.parentNode.removeChild(el);
	});
	}, false);
	</script>
	</body>
	</html>