I have a form in VB2022 and it lays out properly, enabled autoscroll and the scroll bar appears like it should. I'm creating the fields on the form dynamically and there may be 10 lines and there may be 50. With 10 the scroll bar doesn't appear and I'm fine with that. With 50, the scroll bar stops exactly at the bottom of the last field. For aesthetics, I'd like to have the scroll bar go a few pixels beyond the end of the form ... how?
It's been 8 years since I last posted here. Appreciate your help over time.
//al
Related
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
I've been struggling with this for a while. I am trying to create an html/css "chat style" ul list that loads all items from the bottom. I have tried several attempts using scroll tracking event that scroll to bottom, but they all load from the top and don't start scrolling to bottom until there is a scroll bar (of course). What I want is a list that loads items from the bottom and then stays at the bottom.
TIA for any help.
I am using Thomas Kahn's smooth div scroll for "mixed content". Basically I have an issue when scrolling left or right using the hotspots. I have 6 "contentbox" in my HTML. This can obviously go up and down depending on whether content expires or new content is published. Let me explain the scenario to you. The first time the page is loaded, I have the 6 "contentbox" coming up in the descending order of the date. Now once the scroliing begins, let us say 2 "contentbox" scrolled out of the screen from the left side. At this stage, if I scroll left using the left hotspot, it goes back only one. What I want is that it should go back upto the first "contentbox" I have on my HTML. Similarly, if I scroll right, it should go upto the last "contentbox" I have on my HTML. Is this possible?
FYI, when we disable "auto scrolling", the left and the right hotspot work as expected. However, our requirement is to scroll at the same time the left and the right hotspot should traverse to the first and last "contentbox" respectively.
Any help would be highly appreciated.
Link to DropBox --->> https://www.dropbox.com/s/bwy4elhvi4qldbd/Whats_New.zip
Please run WhatsNew.html
I'm currently making a new website for my school and some of my webpages have more content than others and they require scroll bars and when you open these pages, the content moves with a few mm to the left which is really annoying and I can't leave it like that.
Some people advice me to target the html tag and use the overflow-y:scroll property but that way the pages with a few lines of text get a unusable scroll bar - it just looks unprofessional... Is there another option to bypass that issue? I'll be grateful if you can answer me :)
overflow-y: auto;
Causes the scroll bar to be visible when it is needed. Otherwise it will stay hidden. Try and see if it works.