1

I'm working on Angular cdk virtual viewport. Is there any way to automatically adjust height of scroll viewport?

So in my case When viewport size increases there is a blank space displays at the bottom of viewport, this is the similar example for the reference

https://stackblitz.com/edit/components-issue-mxahst?file=app%2Fapp.component.ts

Prasad Tawde
  • 13
  • 5

2 Answers2

1

You can call checkViewportSize on the CdkVirtualScrollViewport which will align your viewport to the new dimensions.

First you take a reference to CdkVirtualScrollViewport in your component

@ViewChild(CdkVirtualScrollViewport, { static: true })

Then after the size change you call checkViewportSize (After Button is clicked)

  public remove() {
    this.showBottomBar = !this.showBottomBar;
    setTimeout((x) => {
      this.cdkVirtualScrollViewport.checkViewportSize();
    }, 10);
  }

Note the little timeout, this is necessary because we want the dom changes (remove bottom-bar; render update) before we check the viewport size to align it.

Full example based on your Stackblitz

https://stackblitz.com/edit/components-issue-zl33lz?file=app%2Fapp.component.html,app%2Fapp.component.ts,app%2Fapp.component.scss

enno.void
  • 6,242
  • 4
  • 25
  • 42
0

Solution 1:

.page { 
  position: relative;
  width: 100px; 
  height: 200px;
}

.content {
   width: 100%;
}

.wrapper {
  position: relative;
  width: 100%; 
  height: 100%; 
  padding: 0; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  border: 1px solid #ddd;
}

.page::after { 
  content:'';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
    display: block;
    width: 5px;
}
.wrapper::-webkit-scrollbar-track {
    background: transparent;
}
    
.wrapper::-webkit-scrollbar-thumb {
    background-color: red;
    border-right: none;
    border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

.wrapper::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}
<div class="page">
<div class="wrapper">
<div class="content">
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
</div>
</div>
</div>

Solution 2:

There're 2 sizes: with or without scrollbars. To get viewport size with scrollbars, use:

var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth; (change to innerHeight and offsetHeight for height)

innerWidth is for W3C browsers and offsetWidth for IE in standard mode.

To get the viewport size without scrollbars (that is what you probably need), use:

var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;

the amount of vertial/horizontal scrolling

This is the tricky part. All browsers except for Chrome use documentElement.scrollLeft and Chrome (and IE in quirks mode) uses document.body.scrollLeft, so we have to check both values:

var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

Refer:

https://www.quirksmode.org/dom/w3c_cssom.html

Pranam Bhat
  • 42
  • 10