I'm working on my own scrollbar for a game. And i can't figure out how to calculate scrollbar position (in browser scrollTop), when content's height changes. I want to show same position of scrollable content after changing its height.
As i can understand after some tests, if i add / remove element above viewport, then scrollTop value changes on height of added / removed element, if i add / remove element below viewport scrollTop value will be the same. How does browser detect, where element was added / removed? Maybe you have source, which explains how scrollbar math works in browser?
Thank you.
Related
In Chrome, the bookmarks bar is disabled with command+shift+b. Should I always be testing sites with this disabled for the browser to truly be "100%"? Or does having this enabled actually make the "vh 95%" for example?
vh uses the size of the viewport. So if you have the bookmarks bar open, then your viewport height is going to be smaller. Would be similar to just resizing your window and make the height smaller.
https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
The viewport-percentage lengths
are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.
https://www.w3.org/TR/CSS21/visudet.html#containing-block-details
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin; it is
the page area for paged media.
The viewport height, when using vh units will always be the inner width of the viewport (visible area of the document), ignoring browser Chrome.
100vh will be 100% of the viewable browser height whether the bookmark bar is enabled or not.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Viewable height of the webpage only. The client toolbars are part of the application window, not the viewport.
I noticed that when I have an element with a horizontal scrollbar, Chrome will add a scrollbar within the element without changing the height, but Firefox will increase the element height to make room for the scrollbar. Any way to control this behavior in either case?
Live Site
I have a site using jmpress, and I'm having a hard time getting scrolling on my content. I'm able to scroll in Chrome by simply selecting text on the page and dragging down, but I'd like to achieve this in all browsers with native scroll, perhaps emulated by javascript. I've checked a number of plugins to do this like jScrollpane and tinyScrollbar, but none of them will work without a height set and overflow-y set to scroll. The second problem: even when I set the overflow-y to scroll, scrolling does not occur with the mousewheel.
Try this in the console: $(".step").jScrollPane();. Nothing happens. Set each step to have a height of 800px and overflow-y scroll, and scrolling works, but still this is only relative to the height of the window. I need some way of calculating the size of the surrounding elements (relatively positioned) so that the height can be calculated when the user resizes the screen.
So is it possible to achieve scrolling on an absolutely positioned element (slide) and keep the height as auto using jmpress?
You could use the window resize event of jquery to set your height dynamically after you set the height you could call the update method of tinyscrollbar to update the scrollbar.
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
I have two-column layout with a header and footer. I have created a JSFilddle with demonstrating this.
The left-column will normally have more content than the right-column.
How can I get the right-column to expand to the height of the left column, or just fill the height of the view-port? I have sene examples of something similar, but not with a footer that is always at the bottom of the display.
How can I get the textarea to fill the height of its parent, the right column (I haven't even got close to solving this one).
I've just edited your jsfiddle.
The idea is to set a min-height on your right column block, and have it determining the height of the whole content section instead of inheriting height attribute from its parent.
Secondly, regarding the text-area. This bit is tricky, you need to use javascript to render it upon everytime a user resize their view port, and update the attribute height of the textarea accordingly.
Cheers
minHeight is important incase you have an empty content container and you dont want the footer to be pushed up right under the nose of the header. Hence minheight prevent that from happening. Once the height of the right column exceeds minHeight, the parent div will be expanded accordingly.
I see nothing wrong with h being the height of the viewport if you really want it to always expand full windows. However I recommend using $(window).innerHeight instead of Height(). But again, this is javascript and your code will never render the same thing on different browsers, so keep that in mind :)
$(window).resize(function() { var h = $(window).height(); $('#MyTextarea').css('height', h-300); });