Perfect scrollbar continues to be displayed even after content is reduced - javascript

I am trying perfect scrollbar. The scrollbar works fine... it starts display of the scrollbar when content exceeds.
...BUT!
When content is deleted to be less than the div's height, I would expect the scrollbar to go away. It does not. It goes only after the dragger is moved up or the rail above the dragger is clicked on.
To let the scrollbar go right away after the content is deleted, does this require use of the eventhandlers and be done programmatically in Javascript? I would have expected this to be a default behaviour. There is nothing much to show in code but here is how I initialize it:
const ps = new PerfectScrollbar('#editDiv', {
maxScrollbarLength: 60,
minScrollbarLength: 30
});
I had initially changed the CSS to alter the width of the scrollbar and change colors. Just to be sure, I reinstalled the CSS with zero changes just to check this behavior. And its still the same.
EDIT: Try with the browser's default scrollbar. The scrollbar goes as soon as the content is deleted to be less than div's height.

Use ps.update() if the content changes.

Related

How to know if an element has finished displaying on the screen (finished rendering) - Javascript

Let's see if someone comes up with something. I have the following problem:
I need to know, with javascript or jquery, when an element has finished displaying on the screen.
It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.
When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.
The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.
If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.
I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.
Thank you very much for your collaboration.
Greetings
You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:
let x = setInterval(function(){
if (propertyValue1 !== propertyValue2){
clearInterval(x);
//do or trigger any code that you need to here
}
},100)

Greyed scrollbar toggles on mouse event

A greyed out scrollbar appears on my webpage whenever there is a mouse event. There are several buttons on the page and clicking them, or mouse-over/out toggles the scrollbar to appear or disappear. I don't know why. When dragging a draggable area, it toggles back and forth very fast on mouse-move. I don't see any css changes when I use the inspect element tools on Chrome.
Has anyone had this problem before or know why this may be happening?
edit:
scrollbar:
If you know that the content will never exceed the size of the container, then you can use css to get rid of the scrollbar entirely
#yourContainerID {
overflow-y: hidden;
}
If you still want there to be a scrollbar when necessary, you could programatically insert one.
var yourContainer = document.getElementById('yourContainerID');
if (yourContainer.offsetHeight < yourContainer.scrollHeight) {
$('#yourContainerID').css('overflow-y', 'scroll');
} else {
$('#yourContainerID').css('overflow-y', 'hidden');
}
Solution was changing 15vw padding to %. I'm still not sure why it fixed it though.
Edit:
Same issue again. I solved it a different way. I think it is to do with the body height not actually taking up the height of its contents, due to the contents perhaps being positioned relatively. I will set up a bare-bones example eventually so I can give a definitive answer to anyone else who experiences this issue.

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

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"});
}
});
});

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.

Categories