I'm loading my site into an iFrame that's on another site. I'd like to scroll to the top of an element within that iFrame. I'm using the Javascript code below:
document.getElementById("cart-wrapper").scrollIntoView({ behavior: 'auto' });
This works perfectly on desktop browsers, however it doesn't work at all on iOS mobile (I've tested Safari and Chrome). I've tried the smooth scroll polyfill (https://github.com/iamdustan/smoothscroll) but that doesn't work either (I've basically included <script type="text/javascript" src="/js/smoothscroll.js"></script>) )
Any solutions? Thanks
Few days back , I was also facing this issue. I fixed it with iScroll
I tried iScroll
I would be able to help you, if you need any
Related
I'm working on a webpage which scrolls good in chrome but in firefox it doesn't work good.
Below is the link of that webpage
https://chayenu.org/app2/
In this web page when you scroll down to "Explore The App
" section and there if you scroll up it works fine in chrome and scrolls up but not in firefox.
It works well in FireFox. May be you are using older version. Try to update browser.
IE is used still by 15.5% of the web users so I would like to support it and Materialize is not supported in IE 7. However, Im testing it in latest browser.
The problem area of the code is that the materialize.js is not working. Specifically this part:
/** Navbar mobile collapse **/
$('.button-collapse').sideNav();
Also not working is the dropdown menus, so definetly a JS problem.
Here are the steps I have tried so far:
Putting jQuery above the materialize css and js files. I had some functionality brought back by putting at the top of the page rather than the bottom.
Used an Async load an example is given below:
jQl.loadjQ('https://code.jquery.com/jquery-3.2.1.min.js'); Ql.loadjQ('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js');
Tried to use a materialize hack:
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
If you can help me get unstuck, much appreciated. Otherwise works fine in Chrome so unlikely to be a coding error. ***UPDATE works in firefox but not opera.
"Hallo Leute",
I fixed the problem by manually uploading the js and css files to the web host environment. Now it works in IE just need to test Opera.
Great stuff critically said
I am calling this javascript on page load
document.body.scrollTop = document.documentElement.scrollTop = 0;
I want html page starts from top when loaded, above javascript working fine for chrome, safari(macbook) but not working for safari on iphone,
can anybody suggest workaround in javascript only.
Posting this here for future visitors from Google.
This same error occured to me... The problem was just one CSS rule on body element.
overflow-x: hidden
If this CSS rule exists, remove it and scrollTop should work on mobile Safari.
As I tested this before, there are problems rendering on ios, but it also depends on the version of the OS for example, for an iPad pro, there is no problem! But on iPad air you there isn't much to do! so what you can do is to make your code compatible like:
document.scrollingElement.scrollTop
it should give you the right solution.
I have a site, created with a template, that works just fine on Chrome, Edge, Safari, etc... but in firefox it crashes. It's a thing with a JS code that animates the images in the home page. You can see what I'm talking about in www.andarescolombia.com
If you go to that site in chrome you'll see the images on the home page working fine, but on firefox they seem to get collapsed to the top of the container:
On Chrome:
On Firefox:
So the images collaps in firefox, but the other JS plugins are working just fine. I already tryed to contact the seller, but they just have a lousy customer support service.
Please help!!
just avoid using $. it should prevent your error from occuring in firefox.
On the other hand why do you want to trigger the scroll event on window.load ? Oo
just wrap the magic you're using inside a function and call it on load and on scroll. saves you a lot of headaches.
I have a flash menu on a site. The menu works fine in all browsers EXCEPT IE9. It looks like this javascript file is not loading:
<script type="text/javascript" src="scripts/ActiveContentDropDownWide.js"></script>
In IE9 it just displays BUTTON1, BUTTON2 etc but in all other browsers it displays the complete menu. This is what happens when the ActiveContentDropDownWide.js script is removed which is why it seems to be a problem with that script and IE9. But I could be wrong?
Any ideas would be greatly appreciated.
Try doing a Fiddler capture with IE9 and FF. Then, compare the 2 captures using Fiddler's Diff feature.
It is seems to me that the menu is hiding behind the content
maybe it is z-index problem if the flash menu inside a div ,give it high z-index number or google for ie9 z-index problem.
The javascript file that powers some of the menu needed to be updated with a new version that supports IE9. Once I updated it, the menu worked fine in IE9. Thanks.