Question

所以我试图用javascript（非jQuery）修复滚动条跳转问题。我找到了代码，可以找出滚动条是否可见。我似乎无法弄清楚如何以某种方式阻止它跳跃。我无法使用overflow-y: scroll;因为它破坏了设计。

我不想使用任何人的图书馆。

我正在考虑将一个与我的滚动条宽度相同的不可见div插入到左侧，这样它就会使中间div居中，但它不会起作用，因为它会弄乱margin-left: auto和{ {1}}。

这个问题让我抓狂！

HTML：

margin-right:auto

的CSS：

<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>

JS：

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;
}

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);

使用margin-auto修复滚动条跳转

1 个答案: