修复滚动条跳动margin-auto

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

我不想使用任何elses librarys。

我想将用同样宽度的可见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);

来源

2016-01-17 Karl Morrison

，你可以添加'padding-left'每当显示滚动条时，都会显示到'body' *或*'html'。但我怀疑这将无缝发挥 –

@米创意是我想到的。然而，标题需要是100％宽度的屏幕，所以：/ –

我想通了。做了一个中间div坐在里面的包装div。然后，当滚动条出现/消失时，我调整包装边距左边的属性。

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

如你所描述的，因为你可以或者检测是否被示出在滚动条不

来源

2016-01-17 19:57:18

修复滚动条跳动margin-auto

回答

相关问题