Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Friday, January 15, 2016

How to prevent scrollbar from repositioning web page?

var bodyid = document.getElementById('bodyid'); bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

Answer by Moesio for How to prevent scrollbar from repositioning web page?


With scroll always being shown, maybe be not good for layout.

Try to limit body width with css3

body {      width: calc(100vw - 34px);  }  

vw is the width of the viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)

Answer by Edward Newsome for How to prevent scrollbar from repositioning web page?


To make the scroll bar to appear outside the div element preventing the repositioning of content inside the div.

Use a static width and I have my div position as absolute. Works for me.

#divID{  overflow: hidden;  width: calc(1024px + 0);  }    #divID:hover{  overflow-y:scoll;  }  

Answer by Rapti for How to prevent scrollbar from repositioning web page?


I had the same issue, but I just had a great idea: Wrap the content of your scrollable element into a div and apply padding-left: calc(100vw - 100%);.

      
Some Content that is higher than the user's screen

0 comments:

Post a Comment

Popular Posts

Powered by Blogger.