All geek questions in one place

Keep a specific item even when its previous siblings grow?

I have a page where the content of various AJAXed elements in the main structure. The structure itself is quite simple, and the elements do not have special positioning for them:

<body> <article id="one"></article> <article id="two"></article> <article id="three"></article> </body>

The content of each article is loaded via AJAX calls, and the length of the content for each of them is not known in advance. In addition, you can go to each section with URLs (so I can get to #two using mysite.com/two , it loads the page and scrolls it to the required article).

This works fine, of course, after loading the content, but my problem is that the content before the target element has not yet been loaded. Since the elements must expand to fit the content, it pushes the target element, so instead:

 ____________________ | Target Element | | | |__________________| | Next Element | |__________________|

You will get the following:

 _____________________ | Previous Element | | | | | |___________________| | Target Element | |___________________|

I tried to set a minimum height for content blocks, but this only works part of the time and really only works if the final height is close to the original height.

Ideally, I would like the viewport to remain in the same position with respect to the content, even if the user scrolls before all the content has loaded, but I agree to keep it in position before the user tries to scroll.

Is there any way to do this?

+4
source share
4 answers

How about this:

  • Get the height of any previous item before calling ajax to load. Save it.
  • After the download is completed, if the ajax call is successful, get a new height.
  • Calculate how much more he uses the difference.
  • Scroll to this amount.

If the item is after the current one, do not scroll.

Besides

This is one of my pets with some web pages. They load and you start reading. Then a 2-inch tall append is added and it moves what you read on the page. Or, even worse, you scroll down and start reading, and for no apparent reason the text just slides at the bottom of the page because the invisible add just loads up.

0
source

Created a small demo here: http://jsfiddle.net/dS5tq/

Check it.

Try scrolling down to the second div after loading the page.

I used setTimeout to add text and clone an existing paragraph for text.

HTML code

 <div> <div id='one' class='box'> <p>um vulputate pretium id nec lorem. Cras ut pharetra massa. Aliquam venenatis ipsum pellentesque lorem viverra eleifend. Pellentesque in<p> </div> <div id='two' class='box'> <p>ger elementum, orci eu tincidunt vehicula, nisl felis semper odio, lacinia elementum risus leo vitae dui. Fusce dictum, justo a consequat ullamcorp<p> </div> <div id='three' class='box'> <p>ce in cursus leo. Integer lorem urna, lacinia mollis libero aliquam, consequat luctus lacus. Mauris pulvinar consequat justo, sed mattis sapien<p> </div> </div>

CSS code

 * { padding : 0; margin : 0; } .box { font-family : Arial; border : 1px solid #ccc; background-color : #eee; padding : 10px 10px 0 10px; line-height : 24px; margin : 10px; } p { margin-bottom : 10px; } #two { background-color : #ece; } #three { background-color : #eec; }

JavaScript code

 $(function() { setTimeout(function() { addContent($('#one p:last').clone(), $('#one')); }, 3000); setTimeout(function() { addContent($('#one p:last').clone(), $('#three')); }, 5000); }); function addContent(data, tgt) { var current_pos = $(window).scrollTop(); var tgt_pos = $(tgt).offset().top; if(tgt_pos < current_pos) { var currentHeight = $(tgt).height(); $(tgt).append(data); var newHeight = $(tgt).height(); $(window).scrollTop(current_pos + newHeight - currentHeight); } else { $(tgt).append(data); } }

Let me know if this helps.

0
source

Set the target to absolute positioning and place it at the top of the screen to scroll it, which essentially scrolls up, and then puts the on-first-scroll event on the window object that reset the target element. http://jsfiddle.net/DjBHX/

 // get the target element var target = $("#two"); // set it to absolute position // now its at the top no matter what target.css("position", "absolute"); target.css("top", 0); // scroll to the top of the page / target window.scrollTo(0, 0); // fake loading $("article").each(function() { // load $(this).load(blah); var elm = $(this) var spam = this.id; for(var i=0; i<4; i++) spam += spam + "<br>"; elm.html(spam); }); // first scroll set target back to static positioning (function() { var fnFirstScroll = function () { // remove the event $(window).off("scroll", fnFirstScroll); // reset the target article target.css("position", "static"); target.css("top", "auto"); window.setTimeout(function() { window.scrollTo(0, target.offset().top); }, 10); } $(window).on("scroll", fnFirstScroll); })();
0
source

Perhaps look at the execution of the ajax success function:

 $.ajax({ ... success: function() { // simulate link click or somesuch } });
0
source

Source: https://habr.com/ru/post/1495574/

More articles:


All Articles