修復滾動條跳動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

回答

相關問題