Menu
I am using the widget collapsed by default with class="panel-collapse collapse". When there are a number of items in the chat and it is opened scrolling starts at the top instead of at the bottom (which works fine if not collapsed by default). An example is at http://www.bestdealadvisors.com, add some items then refresh the page. When the widget is opened it starts at the top. How can I make this scroll from the bottom when opened?
387
Add data-bs-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-bs-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
To create a scrollspy, use the data-bs-spy=” scroll” attribute to make the required area scrollable. For example, we choose html body as the scrollable area. Give ID or class name of the navigation bar to data-bs-target attribute to connect navbar or list-group with scrollable area.
You should listen on the event Bootstrap fires when something is collapsed. There is a bit of information here. Then scroll the chat window to the bottom.
This script has to be at the end of your page (after the bootstrap and jQuery script tags )
<script>
var panelBody = $("#chat-list")
$('#collapseOne').on('shown.bs.collapse', function () {
panelBody.stop().animate({scrollTop:panelBody.prop("scrollHeight")}, '100', 'swing')
})
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
