Here a simplified version of what I got :
https://stackblitz.com/edit/angular-9-0-0-rc-1-scrollable?file=src/app/app.component.html
So for now, I have a horizontal scroll. The 1st left div (blue) is fixed and must not be affected by the horizontal scroll. Only yellow and pink divs are scrollable with horizontal scroll.
What I need now is to set a vertical scroll. This scroll must allow to scroll both blue and pink divs, the yellow one must be fixed, not affected by vertical scroll.
I don't know how to accomplish this.
My app use Angular 9. I've tried to set a vertical scroll in both blue and pink divs, and synchronise them together but it's not ok as there's a small time between the moment that user scrolls in a div and moment that the scroll is reported to the other div, and I need it to be seamless.
I tried with the cdkScrollable, same issue.
Also this page can contains a huge amount of data, latence is expected, so I cannot rely on scroll synchronization.
Any idea?
Many thx
Related
We're using FullCalendar version 4.3.1. We currently have a problem with the header not properly aligning when scrolling horizontally to the right. It only happens when the scrollbar is fully scrolled to the right.
This is how it should look and how it looks when not scrolled to the right.
This is what happens when I scroll it to the right, but just enough so it won't put it off.
And this is what happens when I scroll it fully to the right. As you can see the header doesn't align with the cells anymore.
My guess is that the body is bigger than the header because of the vertical scrollbar and by scrolling the last part it will fail to align the header with the cells.
Any idea how I fix this?
I have a normal prime Ng table which is scrollable vertically. However, if the screen size is too small, I end up with the normal page scroll aswell as the table scroll.
Is there a way around this? To make the table the size of whatever the screen is, with an infinite scroll. So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
Explanation
By default p-table stretches downwards infinitely, unless you limit it's height, in which case it will have a vertical scroll if there's more data than can fit within the height you set.
Moreover, if all your elements together on the page (including the table), don't fit the current view, page will also get it's own scroll.
E.g. I have a menu on top of the page, under it a card with other things, then a table toolbar, then the table, that's a lot of elements and they won't fit within the view, so page will get it's own scroll. Meanwhile your table has scrollHeight of 600px, yet you have data for 900px, it will get it's own scroll too. Boom 2 scrolls.
Fix You can fix it in a few different ways but it all comes down to the desired behavior/look of your page... when I had this prob I just removed height restrictions and let table expand downwards infinitely, it wasn't a problem because: 1- table was the last element of the page from top to bottom; 2- I had paginator to limit size regardless. So I ended up with only the page scroll.
I am working on DataTables. I need scrollbar at the top and bottom of my table. I have more than 25 rows and my table overflow.
Every time I need to scroll down for horizontally scroll the table
Top of table:
Bottom of table:
I solved this, by adding a max-height to the table, which is smaller than 100vh, so that there is a horizontal and a vertical scrollbar (Like in this Demo, when all options are activated: http://fixedheadertable.com/ ). But please notice, that you have to destroy the plugins and initialize a new fixed header table after resize.
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/