{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 The star\" 的问题《Disable Scrolling on Body》','https://www.manongdao.com/q-455144.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I would like to disable scrolling on the HTML body completely. I have tried the following options:
overflow: hidden;(not working, did not disable scrolling, it just hid the scrollbar)position: fixed;(this worked, but it scrolled completely to the top, which is unacceptable for this specific application)
I was unable to find any alternatives to these two options, are there any more?
Set
heightandoverflow:http://jsfiddle.net/q99hvawt/
HTML css works fine if body tag does nothing you can write as well
In this case overriding should be on the body tag, it is easier to control but sometimes gives headaches.
This post was helpful, but just wanted to share a slight alternative that may help others:
Setting
max-heightinstead ofheightalso does the trick. In my case, I'm disabling scrolling based on a class toggle. Setting.someContainer {height: 100%; overflow: hidden;}when the container's height is smaller than that of the viewport would stretch the container, which wouldn't be what you'd want. Settingmax-heightaccounts for this, but if the container's height is greater than the viewport's when the content changes, still disables scrolling.