{"id":118,"date":"2018-05-12T18:29:36","date_gmt":"2018-05-12T18:29:36","guid":{"rendered":"http:\/\/www.bullcrane.com\/angular\/?p=118"},"modified":"2018-05-14T13:58:08","modified_gmt":"2018-05-14T13:58:08","slug":"scroll-only-a-portion-of-the-screen-with-flexbox","status":"publish","type":"post","link":"http:\/\/www.bullcrane.com\/angular\/2018\/05\/12\/scroll-only-a-portion-of-the-screen-with-flexbox\/","title":{"rendered":"Scroll only a portion of the screen with flexbox"},"content":{"rendered":"

So far I am finding that flexbox does indeed work well for positioning and sizing items within the viewport.\u00a0 I like its approach when we are creating an app rather than a document, and of course this usually is the case with Angular.\u00a0 Here is an example.<\/p>\n

A perfect scrollbar<\/h6>\n

Do you have content you want to stay at the top of the window instead of scroll away?\u00a0 This means you have to take control of your content sizing such that the operating system’s native scrollbar for the window never appears.\u00a0 This comes naturally to flexbox.\u00a0 When there is only one flex<\/em> item it takes all of the space – all of the remaining space, to be precise.\u00a0 So use two div’s, with just the second one designated flex<\/em>.\u00a0 The first div will stay fixed at the top.\u00a0 The second div will scroll.\u00a0 There will be no wasted space, and no double scrollbars.\u00a0 Here it is in pure HTML\/CSS:<\/p>\n

<html>\r\n<body>\r\n<div style=\"display:flex;\r\n  flex-flow:column;<\/span>\r\n  height:100%\">\r\n  <div>my fixed content<\/div>\r\n  <div style=\"flex:1;<\/span>overflow-y:auto;\">\r\n    <p>my scrolling content<\/p>\r\n    ... lots of content here ...\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
In Angular we can use the flex-layout module<\/a> to express the div tags more concisely:<\/p>\n
<div fxLayout=\"column\"<\/span> style=\"height:100%\">\r\n\u00a0 <div>my fixed content<\/div>\r\n\u00a0 <div fxFlex<\/span> style=\"overflow-y:auto\">\r\n    <p>my scrolling content<\/p>\r\n    ... lots of content here ...\r\n  <\/div>\r\n<\/div><\/pre>\n
Here is an image of the results I get using this technique in my Shufflizer app:<\/p>\n
\"\"<\/p>\n
[14-May-2018 For some reason, in Shufflizer I had to specify 100vh instead of 100%.\u00a0 Using 100% resulted in simple whole app scrolling.\u00a0 Using vh instead solved it except eventually I noticed a problem in MicroSoft Edge – div’s overlapped as if they didn’t know about each other, all starting at the top of the viewport.\u00a0 So I went back to the pure HTML\/CSS way, but using vh instead of %.\u00a0 That worked in all the browsers I am testing (FireFox, Edge, Chrome).]<\/p>\n","protected":false},"excerpt":{"rendered":"
So far I am finding that flexbox does indeed work well for positioning and sizing items within the viewport.\u00a0 I like its approach when we are creating an app rather than a document, and of course this usually is the case with Angular.\u00a0 Here is an example. A perfect scrollbar Do you have content you … <\/p>\n
Continue reading “Scroll only a portion of the screen with flexbox”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/118"}],"collection":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":16,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":136,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/118\/revisions\/136"}],"wp:attachment":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}