So even the Polymer website has this issue. This is an SPA-world problem.
Repro: Go to http://www.polymer-project.org/docs/elements/core-elements.html, click on e.g. core-ajax on the left and scroll down to the middle, then goto core-xhr. Note the scroll position.
What are some best practices considering that I a) want to avoid behavior like the above, but also b) want to preserve the scroll position for when I use the back arrow to goto a page I've already been? It'd be nice if core-pages had support built in.
This might work as a workaround. You can use the fire event in polymer, once something fire the event you listen to the call and force the page to scroll to top. At least this solved my problem with core-animated-pages transition: slide-from-right.
Polymer
this.fire('scroll-top')
Index.html
document.addEventListener('scroll-top', function(){
// Access the main core-header-panel
var scaffold = document.querySelector('core-scaffold');
var scrollArea = scaffold.shadowRoot.querySelector('core-header-panel');
scrollArea.scroller.scrollTop = 0; // Scroll to top
}
)
update 01/01/2018
Polymer now has a nice element for this:
iron-scroll-threshold
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
My Problem:
In my project, there is an animated container (named .uebersicht) who brings in some divs with a scrollable list. The animation flips (thanks david walsh) between two different lists in my app. Because both of them should be scrollable I have to flip and kick away the flipped container.
I have simplified my markup and CSS and made a fiddle - but the fiddle is working correct :D (maybe a good trace...) So I put it on a hosting service.
site (scrolling not working): http://fiddle.bplaced.net/52426221/
fiddel (same code, works as expected): https://jsfiddle.net/58omteyL/5/
Nevertheless, for a better understanding I visualize my problem:
(if you wonder about the different containers, they are important for the rest of the app)
My approach works well on touch and mouse interaction but the Mac trackpad (like the one in a MacBook) and maybe (could not test this) the magic pad and magic mouse on Mac are just able to scroll the container every 2nd/3rd/4th time.
It seems that Safari 12.0 under MacOS 10.13.6 tries to scroll the wrong container (window-element).
Reproduce the bug:
check out the fiddle with a MacBook/MagicPad/MagicMouse
set
your system scrolling direction to not natural
point in the yellow container and scroll down
if this works (sometimes) move and click around (inside or outside the container) and try again
It seems that there is an area in the container where scrolling never works.
Why this is a SO Question:
You could argue that this is a Safari bug and nothing for SO. But when I'm using the animations from w3css (unfortunately there is no flip) scrolling works as expected.
Hints from the Comments here
When the div is scrolled to the top and you scroll up, the focus goes to the parent and you have to lift the fingers before you are able to scroll down
My trackpad setting is not natural (swipe down = scroll down) changing these setting to natural (swipe up = scroll down, this is standard) make my example work
When scrolling is blocked you can't even scroll with js using scrollTo etc. No scrolling event is fired
The question stays the same because I can not ensure that every user has the setting to natural and not not natural like me.
I have got the bug on: MacBook Pro (15-inch, 2016)
Safari : Version 12.0 (14606.1.36.1.9)
I have added overflow: hidden to HTML, BODY and seems working.
It might be related to locking the body while scrolling but not sure.
I can test it again if you update the code by adding
html,body {
overflow:hidden
}
It's very hard to reproduce and trace properly the issue, but what it seems to work on my Mac is to add overflow:hidden; also on the other two wrappers id="item1" and class="content". In that way the only thing that remains to scroll is the div you want to scroll. I think it could be worth to give it a try.
MacBook Pro (Retina, 15-inch, Early 2013) - OS 10.14.1 -
Safari version Version 12.0.1. - trackpad natural and not not natural
Hope this help.
Finally after a few good comments here I found a solution but it is more likely a workaround (thanks for your input).
I played around with some eventListeners, capturing and bubbling. It seems that the scrolling goes down to the scroll element (capture) but is not bubbling up again. Listen to the scroll event and scroll via JS in the right direction until DOM is unblocked was getting to complicated. But if I modify the style (position/size) of the scrolling element .styleWrap .scrollable the blocking was gone !
After that it turns out that it prevents Safari from any blocking when I modify this element after the animation was finished.
So my workaround is to make a style change and revert that after the CSS animation has been finished - and voilà :
function slide(slideName){
// scroll to top
scroll(0,0);
// show the Slide
var slideElement = document.getElementById(slideName);
slideElement.classList.add('show');
}
setTimeout(function(){
slide('item1');
// make a change to be able to revert this change
var scrollDiv = document.querySelector(".scrollable");
scrollDiv.style.top = "1px";
// change some style (reset the prev. change)
setTimeout(function(){
document.querySelector(".scrollable").style.top = "";
}, 1300 + 10); // CSS animation time + 10ms
}, 100);
Maybe this is the reason why the w3css animation does not lead into blocking...
You can test it here (I add more px to the topto make it more visible here): http://fiddle.bplaced.net/52426221g/
I'm not 100% satisfied with this solution because:
it is a CSS problem solved with JS
you need to know the animation timings (which can change with design)
Therefore I would like to change the accepted answer if there is a CSS solution
In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: position:fixed; and bottom:0;
I made a Codepen to show what I'm talking about: https://codepen.io/anon/pen/xpQWbb/
Chrome on Android keeps the div visible even when the soft keyboard is open:
However, Safari on iOS seems to draw the soft keyboard over the fixed element:
(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)
Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?
I recently ran in to this problem when creating a chat input that should stay fixed at the bottom of the page. Naturally the iOS keyboard displayed on top of the chat input. Knowing the exact keyboard height seems more or less impossible. I embarked on a quest to find a solid value to base my calculations on so i can manually position the chat input container above the keyboard. I wanted to find the actual "innerHeight" value, in other words the currently visible area of the webpage. Due to how the iOS keyboard works, the only way to get that value with the keyboard open seems to be to scroll to the very bottom of the page, and then take a sample of "window.innerHeight".
So, i set up an event listener on my input field on 'click' (since on 'focus' caused a lot of issues for me). This opens the keyboard, which takes a while, so after i set a timeout for 1000ms to make sure (hopefully) that my keyboard is fully open. After 1000ms i quickly scroll to the bottom of the page with javascript, save the value of "window.innerHeight" in this state, and scroll back to where i was. This gives me the actual height of the visible area on the screen.
It seems like the browser window is placed behind the keyboard until you scroll to the very bottom, in which case the whole window 'scrolls up' and the bottom is placed at the top of the keyboard view.
Once i have this value i use currently scrolled value (window.scrollY) plus the value i saved minus the height of my absolute positioned element to determine where to place it. I opted to also hide the input while scrolling since it's flicking around quite a bit. Another downside to this is that you get a quick flick of the page when it does the measurement at the bottom.
Another thing i couldn't solve was the variable height of the address bar. I just made the input a bit higher than i needed so it would have some "padding" at the bottom.
var correctInnerHeight = window.innerHeight;
var isFocused = false;
var docHeight = $(document).height();
var input = $('.myInput');
input.click(function(e){
isFocused = true;
input.css('position', 'absolute');
// Wait for the keyboard to open
setTimeout(function(){
docHeight = $(document).height();
var lastScrollPos = $(document).scrollTop();
// Scroll to the bottom
window.scroll(0, $(document).height());
// Give it a millisecond to get there
setTimeout(function(){
// Save the innerHeight in this state
correctInnerHeight = window.innerHeight;
console.log(correctInnerHeight);
// Now scroll back to where you were, or wish to be.
window.scroll(0, lastScrollPos);
fixInputPosition();
// Make sure the input is focused
input.focus();
}, 1);
}, 1000);
});
input.on('blur', function(){
input.css('position', 'fixed');
input.css('top', 'auto');
input.css('bottom', '');
isFocused = false;
});
$(window).scroll(function(){
fixInputPosition();
});
function fixInputPosition(){
if(isFocused){
var offsetTop = ($(window).scrollTop() + correctInnerHeight) - input.height();
offsetTop = Math.min(docHeight, offsetTop);
input.css('top', offsetTop);
input.css('bottom', 'auto');
}
};
body, html{
margin: 0;
}
html{
width: 100%;
height: 2000px;
}
.myInput{
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='myInput'>
Check out this thread, it talks about a work around that may be more feasible in terms of code. In brief it talks about using the height of the keyboard to move the content into view. All be it a bit hacky it may be difficult to pin down the exact height of the keyboard across devices.
Unfortunately, due to the nature of the IOs Safari keyboard it's not part of the browser viewport so cannot be referenced as you would do typical elements.
#Bhimbim's answer may a good shot too.
Regards,
-B
i experienced this before. What i did back then was :
Make a listener when keyboard is hit.
When keyboard is hit resize you webview's height with screen height - keyboard height.
To do this trick you need to make sure that you html is responsive.
I can show more code in the IOS side, if you're interested i can edit my answer and show you my IOS code. Thank you.
Hi again, sorry, i was mistaken, i thought you were creating apps with webview inside. If you still wanna do this by listening the keyboard i still have work around for you. It may not the perfect way, but i believe this will work if you want to try. Here my suggestion :
You still can have listener from webpage when the keyboard is up. You can put a listener on your textfield by jquery onkeyup or onfocus.
Then you will know when the input is hit and the keyboard will show.
Then you can create a condition in your java script to manipulate your screen.
Hope this give you an insight friend.
#Beaniie thank you !.
Hi Andreyu !. Yes correct, we can not know the keyboard height, not like my case with WebView, I can know the keyboard height through IOS code. I have another work around, not so smart, but might work. You can get the screen size and compare to array of IOS device screen size. Then you might narrowed down the keyboard height by surveying through IOS devices. Good luck friend.
Try using position:absolute and height:100% for the whole page.
When the system displays the keyboard,it plTaces it on top of the app content.
One way is to manage both the keyboard and objects is to embed them inside a UIScrollView object or one of its subclasses, like UITableView. Note that UITableViewController automatically resizes and repositions its table view when there is inline editing of text fields.
When the keyboard is displayed, all you have to do is reset the content area of the scroll view and scroll the desired text object into position. Thus, in response to a UIKeyboardDidShowNotification, your handler method would do the following:
1.Get the size of the keyboard.
2.Adjust the bottom content inset of your scroll view by the keyboard height.
3.Scroll the target text field into view.
Check the Apple developer's guideline to learn more:https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
I tried to find something about this on the net, and although it's a minor issue, I feel as if it impacts the site experience. Furthermore, depending on the browser or speed of your computer, you may not notice this problem.
The issue is I have a fixed header on my site. When scrolling up or down, it seems to lag or drag behind... it stays fixed at the top, but while you scroll it jutters and drags at a different pace.
You can see for yourself, here.
It's doing my head in - it seems to only happen on the portfolio page, and not the home page.
I had same issue on Chrome. Solved it by adding
-webkit-backface-visibility: hidden;
to the header element in my stylesheet;
There is good article regarding this.
Hope this helps.
This may be happening because you're trying to do a fair bit on the window scroll event.
Every time a scroll event fires you've got a parallax scroll function that modifies elements with the parallax class (though there don't seem to be any actual elements with that class). You're also checking whether to add the class that changes your header background.
One thing you can do to improve performance is to do as little as possible inside the actual scroll function.
//Menu contrast happens when user scrolls down
// Save 4 jQuery select operations and 2 function calls per scroll event
var myNav = $('nav');
var heightDiff = $('#bg1').height() - myNav.height();
// Use global variables in the scroll function
$(window).scroll(function () {
if (window.pageYOffset < heightDiff)
{
myNav.removeClass('contrast');
}
else
{
myNav.addClass('contrast');
}
});
You can do something similar with the parallax loop as well.
// Save 2 jQuery select operations and one function call per scroll event
var htmlHeight = $('html').height();
var parallaxElems = $('.parallax');
$(window).scroll(function () {
var scrollpercentage = window.pageYOffset/htmlHeight;
var moveoffset = 350*scrollpercentage; // set parallax coeficcient
parallaxElems.css('background-position-y',(50-moveoffset)+'%');
});
Keep in mind that if you use JavaScript to add new elements to the DOM or modify existing elements, you may have to compute your global variables again.
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'