window.innerWidth and innerHeight return the dimensions of the visual viewport. In desktop browsers, this is generally the browser’s window dimensions. On mobile the situation is a bit more complicated because of pinch zoom. When you load a page without a <meta name=”viewport”> tag, a default layout width is used (e.g. Chrome uses 980px). When the … Read more
There’s a great blog post on this here: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/ Along with a demo here: http://www.kylejlarson.com/files/iosdemo/ In summary, you can use the following on a div containing your main content: .scrollable { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: scroll; -webkit-overflow-scrolling: touch; } The problem I think you’re describing is when you … Read more
One simple (simplicistic) workaround is keeping the scrollbar always around and be dealt with it html,body {margin:0;padding:0} html{overflow-y:scroll} (use overflow-x for a layout that uses vh)
Here’s a pure javascript version of the accepted answer without relying on jQuery and with some fixes to the partial in view detection and support for out of view on top. function checkInView(container, element, partial) { //Get container properties let cTop = container.scrollTop; let cBottom = cTop + container.clientHeight; //Get element properties let eTop = … Read more
Background Information: jsdom does not implement window.resizeBy() or window.resizeTo() jsdom defines the window innerWidth and innerHeight to be 1024 x 768 It is possible to simulate a window resize using jsdom by manually setting window.innerWidth and window.innerHeight and firing the resize event Here is an example: comp.js import * as React from ‘react’; export default … Read more
Use scroll event handler on window Loop over all the li elements to check if the element is in the interested viewport Get the li position from top and check if it is in the interested viewport section. Demo: Changed the height of li for demo purpose. See the comments inline in the code. $(document).ready(function() … Read more
Using the docs here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html It seemed like you should ignore most of the viewport properties and just set user-scalable to “yes”. It’s working on my iphone now. <meta name=”viewport” content=”user-scalable = yes”> Edit:: The mobile tester site doesn’t allow scaling, so it just gives scrollbars. With an actual phone this works.
jQuery Waypoints plugin http://imakewebthings.github.com/jquery-waypoints/ should do the trick UPDATE <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>jQuery Waypoints Plugin – Test</title> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js” type=”text/javascript”></script> <script src=”http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js” type=”text/javascript”></script> <style type=”text/css”> #mydiv {background-color:#FF0000; margin:1500px 0;} </style> </head> <body> <div id=”mydiv”> Content goes here </div> <script type=”text/javascript”> $(function() { $(‘#mydiv’).waypoint(function() { window.location.href=”http://google.com”; }, { offset: ‘100%’ }); }); … Read more
Add this in your preamble \usepackage{hyperref} \usepackage[all]{hypcap} %for going to the top of an image when a figure reference is clicked Make sure that the \usepackage[all]{hypcap} is written after the hyperref package is imported.