Setting Page Scroll Cross-Browser - javascript

I've been working on a project for work where I need to create a Javascript "jump-menu" within a page.
(Q:Wait, a jump-menu? Why don't you just use a elements and namespaces to navigate within your page?
A: Because that would defeat the purpose! So please, don't provide answers like that. I need to do this with Javascript (AND I'M NOT USING JQUERY!!!))
So, here is what I do:
I make a list at the top of the page, and a list at the bottom of the page.
I add an event listener to each list item at the top of the page and I attach a reference to that list items corresponding content item within the page.
When the link at the top is clicked, I grab to offsetTop of the item I want to scroll to, and I set either the document.body.scrollTop or the window.pageYOffset.
I've never actually needed the window.pageYOffset, but somewhere told me it would work and I never removed it from my code. Either way, this appears to work with the document.body.scrollTop in Chrome, Safari, and Opera, yet it doesn't work in Firefox or IE. Why?
Here is the code block where I set the document.body.scrollTop:
if(elem.jump_ref)
{
if(document.body.scrollTop || document.body.scrollTop === 0)
{
document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding;
}
else if(window.pageYOffset || window.pageYOffset === 0)
{
window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding;
}
}
And Heres The Project In JSFIDDLE
I've stepped through and found that "Yes, I am grabbing the right element." and "Yes, I am setting the document.body.scrollTop, and "No, I am not setting the document.body.scrollTop to zero." and yet it still doesn't work! Please help! My webpage is supposed to go public on Tuesday!

Well, I believe I have found my answer. So far, it appears to work in Chrome, Firefox, IE, Opera, and Safari (these were the only ones I was able to test). I don't know what type of mobile support this feature will have (if any), but my page already has an entirely different functionality for mobile anyway.
Either way, here's the fix. Its the window.scrollTo method!:
this.jump = function(evt)
{
var elem = evt.srcElement || evt.currentTarget;
var page_top_padding = 100;
if(elem.jump_ref)
{
window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding));
}
}.bind(this);
And like I said, it works great in nearly everything! Everything except JSFiddle. lol. I don't quite get it, but luckily no one is going to be visiting my webpage in JSFiddle.

Related

scrollTop always returns 0 in safari

the code below works perfectly in chrome, but does not work in safari (desktop & mobile)
const messageBody = document.querySelector(`.chatContainer`);
messageBody.scrollTop = messageBody.scrollHeight;
messageBody is a div with overflow-y: scroll
Every time an item is added to the div, it scrolls to the bottom.
Any idea how to make it work in safari?
I have found to problem, it was a problem in my react code.
Every time I added a new element to my array, all of my components were rerendered. This was because I was overwrittin the existing id I gave them.
The code that worked in chrome did not work in safari, because safari executed the code before all of the components were rendered.
ScrollPosition.prototype.restore = function () {
if (this.readyFor === 'up') {
this.node.scrollTop = this.node.scrollHeight -
this.previousScrollHeightMinusTop;
}
}
this.previousScrollHeightMinusTop = this.node.scrollHeight-this.node.scrollTop;
reference-
http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html

How to universally enable scrolling on website that disabled scrolling?

How to quickly and universally re-enable scrolling on a website that has disabled scrolling with JavaScript? (Given that there is actually content to scroll through)
The scrolling works when JavaScript is disabled and with JavaScript enabled.
window.scrollBy(0, 100) works fine but not when bound to any key or mouse scroll.
In a browser like Chrome etc.:
Inspect the code (for e.g. in Chrome press ctrl + shift + c);
Set overflow: visible on body and/or html element (for e.g., <body style="overflow: visible">)
Find/Remove any JavaScripts that may routinely be checking for removal of the overflow property:
To find such JavaScript code, you could for example, go through the code, or click on different JavaScript code in the code debugger console and hit backspace on your keyboard to remove it.
If you're having trouble finding it, you can simply try removing a couple of JavaScripts (you can of course simply press ctrl + z to undo whatever code you delete, or hit refresh to start over).
Just thought I would help somebody with this.
Typically, you can just paste this in console.
$("body").css({"overflow":"visible"});
Or, the javascript only version:
document.body.style.overflow = "visible";
Edit: Joshua Goldberg's code from a comment reply:
I found a similar, bookmarkletable script that did work in this very helpful QA answer that did:
var r="html,body{overflow:auto !important;}";
var s=document.createElement("style");
s.type="text/css";
s.appendChild(document.createTextNode(r));
document.body.appendChild(s);
void 0;
adding overflow:visible !important; to the body element worked for me.
You can paste the following code to the console to scroll up/down using the a/z keyboard keys. If you want to set your own keys you can visit this page to get the keycodes
function KeyPress(e) {
var evtobj = window.event? event : e
if (evtobj.keyCode == 90) {
window.scrollBy(0, 100)
}
if (evtobj.keyCode == 65) {
window.scrollBy(0, -100)
}
}
document.onkeydown = KeyPress;
Select the Body using chrome dev tools (Inspect ) and change in css overflow:visible,
If that doesn't work then check in below css file if html, body is set as overflow:hidden , change it as visible
One last thing is to check for Event Listeners > "scroll" and test deleting them.
Even if you delete the Javascript that created them, the listeners will stick around and prevent scrolling.
With Chrome, one way to automatically re-enable scrolling on a website is to download the Tampermonkey extension, then add this script (click "Install this script").
In general, if you have a URL for a script where the URL ends in .user.js and have Tampermonkey installed, you can paste it into Chrome's Omnibox to install the script. More ways to install scripts with Tampermonkey can be found here.
Try this:
window.onmousewheel = document.onmousewheel = null
window.ontouchmove = null
window.onwheel = null
Try ur code to add 'script' is last line or make test ur console (F12) enable scrolling
<script>
(function() {
for (div=0; div < document.querySelectorAll('div').length; div++) {
document.querySelectorAll('div')[div].style.overflow = "auto";
};
})();
</script>
Important things to know about overflow
overflow-x: hidden; means can't scroll using horizontal (left to right) axis.
overflow-y: hidden; means can't scroll in vertical (up and down) axis.
overflow: hidden; you can't scroll neither vertical nor horizontal.
This could be another way, based on #Future Sim answer
addEventListener('wheel', (event) => {
window.scrollBy(0, event.deltaY);
});
Just paste it and you will be able to use your mouse wheel
What worked for me was disabling the position: fixed; CSS.

Safari Scrolling issue with jQuery .remove()

I'm developing a plugin for a website building program, and am building the preview page for it. It's sort of a parallax scrolling plugin and the issue I'm having is that in Safari, when you scroll down to a certain point, it wont allow you to scroll any further. It's fine in firefox and chrome, but I saw the same issue in opera. I've managed to narrow it down to the function that's causing it, but I have no idea why or how to fix it.
When I comment out this function, the page scrolls fine, but it doesn't remove the empty divs like I need it to do:
function removeStuff() {
$('.conP').each(function(){
var divDad = $(this),
divses = $(this).children();
if (divses.hasClass('empty'))
divDad.remove();
});
}
here's the preview page where the issue can be observed:
http://reveriesrefined.com/myftp/dack_stev/
//////////EDIT:
I've simplified the code to this:
$('.conP_%id% > .empty').parent().remove();
however, it's still causing scrolling issues in safari and opera, but not the other browsers.
Any help is VERY VERY appreciated!
Actually, I found the issue already. Somehow even though commenting out the function mentioned above seemed to solve it, it was actually a line of code in another function.
I had this function:
function autoPlay() {
var backDiv = $('#outterLax div:first');
backDiv.hide();
$('.conP').hide();
backDiv.remove();
$('#outterLax').append(backDiv);
backDiv.show();
}
but the line:
$('.conP').hide();
was unnecessary as that was already being accomplished elsewhere in my code.

Javascript/jQuery not working in IE

This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?
Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.
I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.

window.scrollBy only works in Firefox?

In my website I have this javascript code, adding a vertical offset when in the url a specific section of the page is specified (#):
if (!!window.location.hash)
window.scrollBy(0,-60);
However this only works in Firefox... I'm pretty sure window.location.hash works in all browsers, that is, the symbol "sharp" is correctly detected in the url.
However, the -60 offset only works in Firefox... this is the url, could you give me some insight ?
http://patrickdiviacco.co.cc/#432
thanks
It seems to me that the default behavior is applied in a different order. So your code runs first, then the browser aligns the window according to the #hash. Push it to the event queue to run it afterwards.
if (typeof window.location.hash == "string") {
setTimeout(function(){ window.scrollBy(0, -60); }, 1);
}
I tested it in IE 7 and it works, also in FireFox and Chrome...
If this really don't work try using this:
function jumpScroll(amount) {
document.body.scrollLeft += amount;
}
jumpScoll(100);
or value which you want...

Categories

Resources