Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Keep vertical scrollbar not on to but at the bottom for .scroll class


Hello to great team of KT Metronic.
I'm trying to keep vertical scrollbar not on to zero but at the bottom, because I'm adding rows into div.scroll.h-400px.row-container by clicking on button.add-row. Newly added rows stays hidden outside visible area because the scrollbar is always on top vertically.
To see newly added row I have to keep scroll down.
Is there a way to keep scrollbar at the botttom which shows the end of div.scrool container not top?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi happy,

You can use the below code to scroll to the bottom:


const scrollEl = document.querySelector("#my_scroll");
scrollEl.scrollTop = scrollEl.scrollHeight;


Regards.



Thank you for your quick reply!

I was actually talking about the scroll here:
https://preview.keenthemes.com/html/keen/docs/general/scroll

my container div height is 300px and I'm adding rows into the container div by clicking on 'add-new-row' button. When the inner rows total height is more than 300px the scroll is added. But when I add rows again the added rows stays outside visible area of the container. I have to scroll down to see the last added row.

So I wanted to know if there is any 'helper' to keep scroll bar at the bottom letting last added row inside visible area.

Thank you!

Not the scroll to top.
Apologies if I did not make myself clear.



Hi,

The above code should work to scroll down the scroll element as it works here. Try to add chat message and you can see how it gets scrolled down.

Regards



That worked perfect. Thank you for your help.
I added your code here:


var parentDiv = document.querySelector(".current-conditions");
var addButton = document.getElementById("add_Cfilter");

document.addEventListener("click", function (event) {
if (event.target.classList.contains("remove-current-filter")) {
event.stopPropagation();
handleRemoveFilter(event.target);
}
});

// Event listener for "Add FC Filter Condition by cloning for demo"
addButton.addEventListener("click", function () {
var template = document.querySelector(".added-fc-row");
var clone = template.cloneNode(true);

var rowNumber = parentDiv.children.length + 1;
clone.querySelector(".fc-row-number").textContent = rowNumber + ".";

var removeButton = clone.querySelector(".remove-current-filter");
removeButton.addEventListener("click", function (event) {
event.stopPropagation();
handleRemoveFilter(event.target);
});

// If there is more than one, remove the "disabled" attribute
if (parentDiv.children.length > 0) {
clone.querySelector(".remove-current-filter").removeAttribute("disabled");
}
parentDiv.appendChild(clone);

// Keep scrolled down while adding new fc row
const scrollEl = document.querySelector("#inboxfilterConditionsRows");
scrollEl.scrollTop = scrollEl.scrollHeight;
});



Hi happy,

Great! Glad to hear that.

If you liked Keen and would love to support it could you please consider leaving a 5-star review here: https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme

This would help with the sales and motivate our team to improve Keen further with amazing updates.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(