How can scroll be prevented after scrollTop reaches certain value say 150.
$(window).scroll(function() {
if($(window).scrollTop() >=50)) {
return false; // basically don't scroll
}
});
the .scrollTop set the scrollHeight using scrollTo function. It doesn't scroll from x to y, It just goes to y.
So basically you cannot stop the scroll as your event will be called after it is set to y. You can probably set the desired scrollHeight inside the handler after comparing the height.
if($(window).scrollTop() >=50)
{
$(window).scrollTop(0);
}
Note: using it on an element is bearable, but on window object will be annoying to the user. Above is just to show how it works.
Try scrolling in >> http://jsfiddle.net/KwgMj << and see how annoying it can be.
$(window).scroll(function(e) {
if($(window).scrollTop() >=50)) {
$(window).scrollTop(50)
}
});
Apart from the obvious question; why would you want this?
I would suggest another approach.
Have a wrapper which fills the entire window, have a certain height and use overflow-x: hidden in css.
This may and may not be what you're after though.
If you wish to make a continuing site that allows you to keep scrolling for the next step, I'd suggest you to simply .slideDown() relevant content.
The scroll is a really basic function which shouldn't be modified with for no good reason.
EDIT:
For a ipad specific solution, use a wrapper:
<? if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
<!-- If iPad, add style -->
<style type="text/css">
div#wrapper {
height: 100%;
overflow: hidden;
}
</style>
<? endif; ?>
<body>
<div id="wrapper">
<!-- Content here -->
</div>
</body>
Related
I'm trying to find out wether the site is scrollable or not.
Currently I'm comparing $("body").height() and window.innerHeight.
As long as the user opens it with the url or with a link it's all fine, I'm getting the height of the whole site. But if I'm already on this page and just press F5 this $("body").height() returns the height of the window and no longer of the whole page (I can still scroll).
I already tried $(window).height() and document.documentElement.clientHeight as well. All three methods are always returning the same. (Right value if with url or link, wrong if F5 or Ctrl+ R).
Somebody know where my mistake is or is there another method i could use?
Thanks in advance!
EDIT: For clarification: I have a footer bar, which should always be on the bottom of the current page. If the page is scrollable, the div with the footer shows up in the end of the page. If not, im setting the main div too 100%, so the footer shows up in the bottom. I'm checking it currently that way:
$(document).ready(function() {
if (document.body.scrollHeight == document.body.clientHeight) {
document.getElementById("mainbody").style = "height: 100%";
}
});
And my body is like this:
<body>
<div class="mainbody" id="mainbody">
<?php include "assets/header.php" ?>
<?php include $currentsite ?>
<?php include "assets/footer.php" ?>
</div>
</body>
The div with the footer has width: 100%; bottom: 0; position: absolute;. But if you just reload the page scrollHeight, clientHeight, innerHeight and height() are all returningthe height of thr screen and no longer of the actual document. I hope that more understandable. And sorry for my bad english.
Here's the problem visualized: https://www.youtube.com/watch?v=pzWHUsE0ozA
Try comparing scrollHeight and clientHeight. Like so:
if (document.body.scrollHeight !== document.body.clientHeight){
// Scrollable
} else{
// Not scrollable
}
I have a fixed element that attaches on my page when you reach it in the scroll. This element can sometimes have content above it but not below it, meaning the page depth might not be deep enough to support this kind of behavior, because of this it prevents the user from reaching the bottom of the page and causes the page to bounce, presumably because it's removing the element from the scroll when it fixes, which causes the condition in the scroll event function to no longer be true. The gif shows the undesired effect when this happens.
Demonstrated here in this fiddle: https://jsfiddle.net/dcsjx625/8/
The pages are dynamic so removing the effect for a single page is not possible.
<body>
<div class="header">
<img src="http://placehold.it/600x401">
</div>
<div class="content-parent">
<div class="content">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
</div>
</div>
<div class="footer-content">
Footer
</div>
</body>
jQuery:
var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();
function checkScroll() {
if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
$(window).scroll(function() {
checkScroll();
});
/* Updates the $fixedWidth variable on resize */
$(window).resize(function() {
$fixedWidth = $('.content').parent().width();
$(window).scroll();
});
Ideally I want to prevent the sticking effect if the element is close enough to the bottom of the page that it might cause a problem.
I've tried calculating the page depth vs the element height in the checkScroll() function like so but even this isn't working. I feel like I'm right on the edge of solving this.:
function checkScroll() {
height = $stickyChain.height() + 100;
depth = $(document).height() - $stickyChainOffset.top;
if ($(window).scrollTop() > $stickyChainOffset.top - 100 && depth > height) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
Any help would be greatly appreciated!
I gotta be honest, I understand your problem but I have no idea when and why you'd run into this exact behavior. That said, here's my workaround and some notes:
The height of your content needs to be 2x the height of fixed element in order to maintain the scrollbar. Otherwise, once the element is fixed, your document entirely loses the scrollbar.
I'm saving the original offset of fixed element to a variable that is used as a marker for future reset. However, I am also redefining the $stickyChainOffset in every scroll event, that you used to define only once. I'm doing this because it changes once fixed.
You can comment and uncomment the padding I saved in css to see how the page behaves in various cases.
If you have any other questions, let me know.
https://jsfiddle.net/1fke1j3d/1/
Usually I don't ask questions...I'm looking for a solution until I give up,
and this is the case here.
There are many similar questions to my but after a thorough search I found nothing.
So the question is:
After selecting a checkbox the div at the bottom of the page
shuold be sticky untill the user scrolling down to the original place where it was.
I have a great example from kickstarter web site :
If only I could know how they do it :)
If I was not clear enough I'd love to explain myself better.
Thanks in advance
After clicking on checkbox,
You can add these CSS lines to div
position:fixed;
bottom:0;
you want to add position: fixed and attach it to the bottom of the container when checked
html
<div class="wrapper">
<input type="checkbox" id="check"/>
<div id="foot"></div>
</div>
js
var check = document.getElementById('check');
var foot = document.getElementById('foot');
check.addEventListener('change', function () {
if (check.checked) {
foot.style.position = 'fixed';
foot.style.bottom = 0;
}
});
fiddle - http://jsfiddle.net/qak2ept6/
EDIT - http://jsfiddle.net/qak2ept6/1/ restore when unchecked
EDIT EDIT - http://jsfiddle.net/qak2ept6/3/ attach on scroll
when you check the check box. create div with position fixed and store the offset of the bottom edge of the window that would be normally your window height. Assign scroll event and keep checking if the scroll value is equal to the offset you have stored and when it reached just remove the fixed position from the div.
My guess (and if I was doing it) It'll be done by monitoring scroll position and applying a css style or not accordingly.
Something like
Inject it in invisible state in to the document
Note it's position (y coord)
Apply class to make it stick to the bottom of the window and show
On scroll, as soon as you get near the expected yCoord, remove the class and let it assume it's rightful place in the document
On further scroll (when you scroll away), re-apply class until you scroll back
HTH
If i have understood your question, I guess what you want is here
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
If not, please explain us with more code and what exactly you need
After dabbling in Chrome Extensions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?
I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:
body {overflow-x:hidden;overflow-y:auto;}
So when a vertical scrollbar appears the content at least doesn't jump.
Perhaps you need to specify a width on the scrollbar.
::-webkit-scrollbar {
width: 42px; //Do not know actual width, but I assume you do
}
I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.
I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?
Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.
The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).
Is this possible to achieve somehow?
Edit
I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)
The first image is how the page looks when opened.
Now, the mouse sits in the indicated position and scrolls and what should happen is that
First the inner div scrolls its content (Fig. 2)
The inner div has finished scrolling (Fig. 3)
The body element scrolls so that the div itself gets moved. (Fig. 4)
Hope it is a bit clearer now.
(Image thanks to gomockingbird.com)
I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).
An option could be using the jQuery scroll plugin. I know it has the availability to create scrollbars on an div. The only thing you need to add yourself is the logic to catch the events when keyboard buttons are pressed. Just check out the keycodes for the arrow keys and make the div scroll down.
The plugin can be found here.
You can use it like this;
<script type="text/javascript">
// append scrollbar to all DOM nodes with class css-scrollbar
$(function(){
$('.css-scrollbar').scrollbar();
})
</script>
here is a solution that might work: (fiddle: http://jsfiddle.net/maniator/9sb2a/)
var last_scroll = -1;
$(window).scroll(function(e){
if($('#content').scrollTop());
var scroll = $('#view').data('scroll');
if(scroll == undefined){
$('#content').data('scroll', 5);
scroll = $('#content').data('scroll');
}
else {
$('#content').data('scroll', scroll + 5);
scroll = $('#view').data('scroll');
}
/*
console.log({
'window scroll':$('window').scrollTop(),
'scroll var': scroll,
'view scroll':$('#view').scrollTop(),
'view height':$('#view').height(),
'ls': last_scroll
});
//*/
if(last_scroll != $('#content').scrollTop()){ //check for new scroll
last_scroll = $('#content').scrollTop()
$('#content').scrollTop($('#content').scrollTop() + scroll);
$(this).scrollTop(0);
//console.log(e, 'scrolling');
}
})
It is a bit buggy but it is a start :-)
The only way I believe you can achieve this is through the use of frames.
Frames - W3Schools Reference
If you just want to have a fixed positioned "div" and scroll only it, maybe you could use a trick like:
http://jsfiddle.net/3cpvT/
Scrolling with mouse wheel and all kinds of keys works as expected. Only thing is that the scrollbar is on the document body only.
I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.
CSS:
body.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
JS (jQuery):
if ($("body").height() > $(window).height()) {
var top;
$('#scrolldiv').mouseenter(function() {
top = $(window).scrollTop();
$('body').addClass('noscroll').css({top: -top + 'px'});
}).mouseleave(function() {
$('body').removeClass('noscroll');
$(window).scrollTop(top);
});
}
The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv