Scroll only scrollable div and not page in Blazor Server - javascript

I've seen quite a few old posts with similar issues but haven't been able to quite find a solution that works for me. In my blazor server project I have a script that should scroll a div inside a component on pages. (timeline of events). This div should scroll on load (to bottom of items). Now if the timelone is not in view when it loads (lower down on page, this is by design) it would also bring the div into view (scroll the page down), where I only want the div to scroll to the bottom. This is what I currently use. What's the easiest way to only make the div scroll, and not the page even if the div isn't visible?
The reason I also specify an item in my script is that if events happen higher up (event status changes, etc) then it requires view, so it would scroll up to get to the item of focus. On page load, I would just specify the index of the last item.
<script>
function ListViewScroll(args) {
let div = document.getElementById('lstTimeLine');
div.querySelector('[data-uid="' + args.id + '"]').scrollIntoView({ behavior: 'smooth' });
}
</script>
Thanks so much for help in advance.

To Mister Magoo's point, This is what worked for me:
function ScrollTimelineToBottom() {
let div = document.getElementById('lstTimeLine');
div.scrollTop = div.scrollHeight;
} ;
Sorry for the dup post.

You should use his css style in your page, so that your page do not have scrollbars and also do not scroll
html, body
{
overflow-y: hidden;
}

Related

Scroll to div ID with offset

I am currently runnning a test site on Wordpress.
I have my page with several divs which have IDs and a menu on top with anchors which lead to those IDs.
My header is sticky, so when I click an anchor, it navigates to the div ID, but the beginning of the div stays hidden below the header. I would like it so that when I click an anchor, it navigates to the div, but few pixels above it.
I managed to do that, though with a little problem.
(function($,document){
$("a[href^='#']").click(function(){
var url = $(this).attr('href');
$('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
});
})(jQuery);
What happens is:
I click an anchor with a href="#someid"
My browser navigates to the #someid with offset of - 90px (It works perfectly so far)
Then my browser scrolls 90px down, to the position where the div #someid starts at the beginning of the viewport (and behind the sticky header).
Finally my URL changes to http://example.com/#someid
I just want to delete step 3. Any help is much appreciated.
Update:
I just found out my theme has jQuery "One-page-nav" plugin installed and it is interfering. Still trying to understand how it works and if I can modify it to have offsets
I was having the same issue and in my case I solved it by adding padding-top and a negative margin-top of the same value:
.some-class {
padding-top: 4em;
margin-top: -4em;
}
By doing this my element looks like it's on the exact same location but the browser finds it sooner while scrolling. You can set these values to the height of your sticky header or play around to make sure the heading is exactly where you want it to be.
I hope I'm explaining this in a way that's understandable... It sure makes sense in my head :D

How to add child nodes to parent nodes without having view jump to where element is being loaded?

As I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom most element as it is being loaded rather than loading them and having the view stay at the current view. So at the beginning it should be at the top of the screen and stay there instead of jumping to the bottom and as I scroll down and it renders more elements it should stay at that spot as well whilst the rest loads.
Here is the code of what is essentially in my js file.
function loadMultipleElements(amountToLoad, url) {
var parentDiv = document.getElementById("instance");
for(var i = 0; i < amountToLoad; i++) {
var iframe = document.createElement('div')
iframe.innerHTML = '<iframe src=\"' + url + '\"></iframe>';
parentDiv.appendChild(iframe);
}
}
Then how I'm loading it in the html file with infinite scroll from jquery,
<script>
loadMultipleElements(5, "https://www.example.com");
$(window).scroll(function() {
if($(window).scrollTop() == ($(document).height()) - $(window).height()) {
loadMultipleElements(5, "https://www.example.com");
}
});
</script>
So when I run this on my localhost it will have everything render as it opens but jump to the bottom of the screen to render it then jump back to the current view. The big problem here is because of infinite scroll and how it keeps jumping to the bottom it ends up going indefinitely because it keeps jumping to the bottom triggering the jquery function.
EDIT: Plunker included though not sure how to get jquery to do infinite scrolling with plunker at the moment so right now just have a fixed load value of 10. Even already it is scrolling to the bottom as it renders more.
http://plnkr.co/edit/fUrJek3RAicHG98lUrC9?p=preview
Your problem is caused by the fact that when bing automatically focuses the search bar, your browser scrolls down to the iframe so that you can type in text.
(See a "slow-mo illustration" here.)
The only workaround I know of is to use the iframe sandbox attribute - HTML5 only! - to prevent bing from focusing the searchbar. Then when the iframe is finished loading, we reallow JavaScript. Example.
There are, however, a couple of problems with this approach.
Since it works by disabling javascript when the iframe is loading, desired javascript functionality is also disabled. (ie. no 'recent stories')
It feels incredibly hacky.
It isn't obvious what we're trying to do.
PS: Here's what W3Schools has to say about the sandbox attribute and here's a walkthrough on html5rocks.
PPS: If anyone knows of a better way to do this, I'd love to hear it.

Navbar visibility point auto-adjusts after top-down scrolling

Have put together a sticky navbar (jsfiddle) that comes into view only after the user scrolls down 10px from the top of the document. However as seen in the fiddle; using:
$(window).scroll(function () {
if ($(this).scrollTop() > 10) {
document.getElementById('navig').style.visibility = 'visible';
this only works in the first instance after the code is run. In subsequent similar actions (after scrolling down the document completely and scrolling back up again) in the same session, the navbar comes into appearance much further down than 10px. It only works again on refresh (rereun) and that too again, only the first instance of top to bottom scrolling.
Also, I'd want the effect to act on scrolling back up ie. the fixed navbar should become absolute at the base of the header when the user moves past that point. And it should hide when scrolling past 10px from top. There isn't a scrollBottom() function, so how is this handled?
This fiddle has jquery loaded: https://jsfiddle.net/6ss64s7e/
How can these issues be addressed? (pardon, am new to javascript).
Before you return to the value position:absolute; you have to delete all the other properties that you added because they won't be automatically deleted - so, you don't need top:0; anymore.
You can delete the top:0; property by passing empty string to its value, like this:
$('#navig').css({'position':'absolute','top':''});
For the detection of scroll and its direction, see this question.

How to 'lock' scroll to div?

I've set up a scrolling website (essentially a parallax-styled page, without the parallax effects) where each "page" is just a div that takes up 100% of the screen. But I need some sort of mechanism to 'lock' the scroll into the correct position so that the div will align properly with the user's browser.
If you need an example, Flickr's splash page does this perfectly.
Thanks.
EDIT: Here's a link to the site I'm working on. The code's a bit messy, and some images aren't loading (since they're not hosted yet) but it's there to give you a rough idea of how the site functions.
http://fiddle.jshell.net/99QjJ/
I just tried to build a fast solution: Fiddle
It prevents the normal scrolling and scrolls just to the appropriate offset of the divs:
if(!scrolling) {
scrolling = true;
currentDiv = (scrollDirection == "down" ? currentDiv + 1 : currentDiv - 1)
$("html,body").animate({
"scrollTop":offsets[currentDiv]
},{queue:true,duration:1000,complete:function() {
window.setTimeout(function() {
scrolling = false;
},200);
}});
It's no complete solution but I think this would work.
Another idea would be using one of the thousands of jQuery plugins which make the page scrollable via the arrow keys. I think if each of the divs fits the entire screen size there's no actual need for scrolling "in between".
So you're doing a 'one page' site, correct? Can't you use anchor tags on each element you want to jump to?
You can animate it to make it look pretty with this nice jQuery plugin

HTML fixed large element

I've been racking my brain and my Google Fu for a few hours now trying to find a solution to this one, but can't seem to come up with anything satisfactory.
I want to affix an element to the side of the page for some search criteria, much like Bootstrap's "Affix" plugin. (Demo Here). The problem is that it's going to be very common that the element is much taller than the window. So there will be scrolling of the element itself involved.
Usually this wouldn't be a problem because as the user hits the top + bottom of the document they would be able to see the top and bottom of the fixed element. (See bootstrap example while shrinking you're window very short). But we're planning on using infinite scroll on our results set, meaning there won't be a bottom to hit, and therefore they'll never see the bottom of the fixed element. As the user scrolls down, it needs to be bottom fixed so the user sees all criteria, then on the way up, it needs to be top fixed.
So I started off by modifying Bootstrap's plugin (I'm not actually using bootstrap). Now scrolling down the page is easy, using a fixed point on the bottom of the element means that it's not affixed until you reach the bottom of it.
But scrolling back up again is where I'm hitting issues.
Am I missing something really obvious and easy here (it is Monday morning after all), or does anyone know of a plugin / patch to bootstraps affix.
TL;DR
Need to affix a very tall element to the page and allow it to scroll. So it's fixed on the way down, then as they scroll back up, the element isn't fixed so it's also being scrolled up. Once the top of the element is hit, fix it there.
Is this what you Want to do DEMO
Simple jQuery function that will help.
$(function()
{
affix= $(".affix-top");
var affixHeight = parseInt(affix.height());
var affixTop = parseInt(affix.offset().top);
var affixBottom = parseInt(affixTop + affixHeight);
// Bind a scroll event for the whole page
$(document).bind("scroll", function(e)
{
// Calculate how far down the user has scrolled
var screenBottom = parseInt($(window).height() +$(window).scrollTop() );
// Test if the div has been revealed
if(screenBottom > affixBottom)
{
affix.attr("style","");
affix.css({"bottom":"0px","position":"fixed"});
}
else
{
affix.attr("style","");
affix.css({"top":"0px","position":"relative"});
}
});
});

Categories