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...
Related
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.
I have this plunker in which I try to demo what I am doing with my project (warning requires flex-box). I have it so the bootstrap nav pill changes when I reach the header. The problem is scrolling appears to be chaotic (depending on screen size but also just randomly goes to different places with each scroll). So sometimes the section header is 10px from the top, others it is 50px. Is there a way I can manipulate the scroll using either CSS or JS?
See Issue
It will depend on browser, screen size and a variety of factors, however, if you scroll up and down some sections should get missed. This will only happen occasionally, but it does happen regularly.
Code
My Angular code for finding the offset...
function elementInViewport(el) {
var top = el.getBoundingClientRect().top - 90;
return (
top >= 0 && top <= 20
);
}
Consider setting the overflow css of your body element to hidden and the height to whatever you want the user to be able to scroll. I don't know why you'd want to do this, though.
I'm displaying a list of results on my results page that require me to scroll, which is fine, but the whole page( nav bar, maps next to results, etc) all scroll down as well. I'm trying to figure out how to get JUST the list if results to be scrollable. I've tried to put
overflow-y: scroll
on a number of of the div's surrounding the list and
overflow-y:hidden
on the body to prevent the whole from scrolling down
but nothing seems to work. All I can achieve is a bunch of y - scroll bars that are all unusable,
where the outer most scroll is hidden (disabled) and I can't scroll any of the inner most scroll's, even though there is result content below the screen.
Can anyone suggest another way to create a scrollable div list on one side of the page while the other side remains unscrollable. Just like Airbnb.com's result page. Or please point me to some examples or Fiddle examples.
Try to give your div a fixed size.
The <div> needs to have a set height but you need this to be responsive. The best way to do this to support older browsers is using JavaScript. This <div> will resize to the current window height upon resize, the width is up to you, if you want it like Airbnb's then you'll need to set the width to 50%.
HTML:
<body onresize="setDiv();" style="overflow-y:hidden;">
<div id="listResults" style="border: 1px solid black;overflow-y:scroll;">some list results here</div>
</body>
JS:
function setDiv() {
var x = window.innerHeight;
document.getElementById("listResults").textContent = "height: " + x;
document.getElementById("listResults").style.height = x + 'px';
}
P.S. I only put the border there so you could see that the div was actually resizing.
I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?
I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.
Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!
I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})
If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.
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.