javascript - 修复使用 margin-auto 时滚动条跳转的问题

Question

所以我正在尝试用 javascript(非 jQuery)修复滚动条跳转问题。我找到了确定滚动条是否可见的代码。我似乎无法弄清楚如何以某种方式阻止它跳跃。我不能使用 overflow-y: scroll;，因为它会破坏设计。

我不想使用任何其他人的库。

我正在考虑在左侧插入一个与我的滚动条宽度相同的不可见 div，以便它居中中间 div，但它没有用，因为它搞砸了 margin-left: auto 和 margin-right:auto。

这个问题快把我逼疯了!

html:

<div class="header">header</div>
<div class="container">
  <div id="info"></div>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
  herro<br>
</div>

CSS:

html, body {
  margin: 0;
}

.header {
  width: 100%;
  background:lightblue;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  background: red;
}

js:

(function (window, document) {
    window.addEventListener('resize', function resized() {
        var scrollHeight = document.body.scrollHeight;
        var clientHeight = document.documentElement.clientHeight;
        var hasVerticalScrollbar = scrollHeight > clientHeight;
        if (hasVerticalScrollbar) {
            document.getElementById('info').innerHTML = "scrollbar";
        } else {
            document.getElementById('info').innerHTML = "!scrollbar";
        }
    });

    var iframe = document.createElement('iframe');
    iframe.id = "hacky-scrollbar-resize-listener";
    iframe.style.cssText = 'height: 0; background-color: transparent; margin: 0; padding: 0; overflow: hidden; border-width: 0; position: absolute; width: 100%;';

    iframe.onload = function () {
        iframe.contentWindow.addEventListener('resize', function () {
            try {
                var evt = document.createEvent('UIEvents');
                evt.initUIEvent('resize', true, false, window, 0);
                window.dispatchEvent(evt);
            } catch (e) {}
        });
    };

    document.body.appendChild(iframe);
})(window, document);

Answer 1

我想通了。制作了一个包装 div，中间的 div 位于其中。然后，当滚动条出现/消失时，我调整包装器的 margin-left 属性。

http://codepen.io/basickarl/pen/rxGRXR

HTML:

<div class="header">header</div>
<div id="wrapper">
  <div class="container">
    <div id="info"></div>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
    herro<br>
  </div>
</div>

CSS:

html, body {
  margin: 0;
}

.header {
  width: 100%;
  background:lightblue;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  background: red;
}

js:

(function (window, document) {
    window.addEventListener('resize', function resized() {
        var scrollHeight = document.body.scrollHeight;
        var clientHeight = document.documentElement.clientHeight;
        var hasVerticalScrollbar = scrollHeight > clientHeight;
        if (hasVerticalScrollbar) {
            document.getElementById('info').innerHTML = "scrollbar";
            document.getElementById('wrapper').style.marginLeft = '15px';
        } else {
            document.getElementById('info').innerHTML = "!scrollbar";
            document.getElementById('wrapper').style.marginLeft = '0px';
        }
    });

    var iframe = document.createElement('iframe');
    iframe.id = "hacky-scrollbar-resize-listener";
    iframe.style.cssText = 'height: 0; background-color: transparent; margin: 0; padding: 0; overflow: hidden; border-width: 0; position: absolute; width: 100%;';

    iframe.onload = function () {
        iframe.contentWindow.addEventListener('resize', function () {
            try {
                var evt = document.createEvent('UIEvents');
                evt.initUIEvent('resize', true, false, window, 0);
                window.dispatchEvent(evt);
            } catch (e) {}
        });
    };

    document.body.appendChild(iframe);
})(window, document);