I have a page with a number of lazy loaded images and I'm trying to scroll to anchors on the same page but problem is the images are responsive and the height can vary so scroll takes me to the wrong place in the place in this page. My best guess it's because when the scrolling is executed the images are not yet rendered and so the scroll function does not know the height of the images.
Is there some workaround?
Related
Has anyone used react-pro-sidebar before? I am trying to make the sidebar sticky and allow my content to scroll. But every time my content goes below the viewport, the sidebar is not sticking.
This is how the images looks like when the page is loaded on first render. On zooming, the white spaces are no more until zoom out again, and after refreshing the page they are gone. Why is that happening to the image ?
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
I'm using the angular ui bootstrap accordian. Everything works great except when I expand an accordian section that is big enough to cause the browser to show a scrollbar for the page, the whole page jolts to the left by the amount of the width of the scrollbar. When the accordian is small enough that a scrollbar isn't needed, the page jolts back to the original size.
I'm not sure what to do about this...does this require a hack, or is there some elegant solution using accordian settings or bootstrap?
I think your only solution is to always show the scrollbar
How to always show the vertical scrollbar in a browser?
I have several Fusioncharts on my page and some of them are outside the viewport.
Usually, they render as soon as the user scrolls the page and make them visible.
Now, I have to export all those charts and, so, I need them to be rendered before starting the export process: is there a way to force the rendering without asking the user to scroll the page down?
Well a hack would be to use JavaScript to scroll to bottom and then again to top before exporting.