DISCLAIMER: overlay has been deprecated. You can still use this if you absolutely have to, but try not to. This only works on WebKit browsers, but I like it a lot. Will behave like auto on other browsers. .yourContent{ overflow-y: overlay; } This will make the scrollbar appear only as an overlay, thus not affecting … Read more
In pure javascript you can simply do like that: window.onscroll = function (e) { console.log(window.scrollY); // Value of scroll Y in px }; More infos (The Mozilla Developer Network) : onscroll scrollY
Provided your current check is firing when scrolled to the page’s bottom, you can try some basic arithmetics: if ($(window).scrollTop() >= ($(document).height() – $(window).height())*0.7){ //where 0.7 corresponds to 70% –^ Make sure to add a check to don’t fire multiple simultaneous Ajax requests, if you didn’t already. This is rather out of the scope of … Read more
You have a few options. Use white-space:nowrap; and some padding. Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox. Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.
function has_scrollbar(elem_id) { const elem = document.getElementById(elem_id); if (elem.clientHeight < elem.scrollHeight) alert(“The element has a vertical scrollbar!”); else alert(“The element doesn’t have a vertical scrollbar.”); } See this jsFiddle http://jsfiddle.net/qKNXH/
Scrollbar widths can vary between browsers and operating systems, and unfortunately CSS does not provide a way to detect those widths: we need to use JavaScript. Other people have solved this problem by measuring the width of the scrollbar on an element: http://davidwalsh.name/detect-scrollbar-width (original post) http://jsfiddle.net/a1m6an3u/ (live example) We create a div .scrollbar-measure, add a … Read more
There are two ways to get a similar result: Javascript Lib Use http://grsmto.github.io/simplebar/ https://jsfiddle.net/w0a5Ls6h/ Pro: Browser compatibility Satisfactory result Cons: 3rd javascript or Only CSS <style> .faq-body { width: 250px; height: 400px; background: #fff; overflow-y: scroll; border: 1px solid #7b7d7f; } .faq-body::-webkit-scrollbar { width: 7px; } .faq-body::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.4); border-radius: 10rem; border: 1px solid … Read more
The TableLayoutPanel is an example of a ScrollableControl. You can therefore set it’s AutoScroll property to True and the control will automatically create scroll bars when it’s preferred size exceeds its current size. This will provide you with the desired effect with minimal hassle. Procedure Set the MaximumSize property to a preferred maximum size or … Read more
#boardslist { &::-webkit-scrollbar { width: 0.5em; height: 0.5em; } &::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.1); border-radius: 3px; &:hover { background: rgba(255,255,255,.2); } } } Check this out http://codepen.io/tholman/pen/tldwm
Setting a height on your body and html of 100% should fix you up. Without a defined height your content is not overflowing, so you will not get the desired behavior. html, body { overflow-y:hidden; height:100%; }