First of all: I know there are some topics about this already, but none of them seem to help me.
I tried all methods I could find to disable scrolling on one of my pages, but none of them work and so I come to seek help here.
What I tried:
Creating a css class which hides overflow (same with attr.noScroll)
setScrollDisabled
set a div as ion-fixed
ion-content no-bounce
::-webkit-scrollbar
overflow-scroll="false"
This is what my page looks like ...
It has this white bar on the bottom of the screen when I scroll down
I only added a background picture whose width I set to 100% and height:auto (height: 100% produces the same white bar)
For reference, here is my code if it helps
<ion-content>
<img class="bgc" src="assets/background.png">
</ion-content>
The scroll event cannot be canceled. But you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
http://output.jsbin.com/xatidu/4/ <-- Working version
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
To fix it, you should understand what's causing it, so you probably want to read this.
In some special cases, you might be able to hide that white space by disabling scrolling, but that's really not how you should approach this issue.
Instead, you should just remove the white space. You can do it by applying
display: block;
... or ...
float: left;
width: 100%;
height: auto;
to your <img> element.
As an alternative, you can change your markup to:
<ion-content>
<img class="bgc" src="assets/background.png"
/></ion-content>
Related
I have a re sizable div. While trying to resize it the whole page is getting selected with blue color even though I didn't intend to in iE and Edge. I have tried many solutions shown on web but nothing worked. Below is my code. I am unable to prevent default action by event on mouse move. I am listening on ownerDocument for mouse move event.
Below code is working as expected in chrome and mozilla
I have seen in console by inspecting in evt variable, before stop propagation prevent default is true, after stop propagation prevent default is false. Same as google chromes behavior but still dont get why is whole page getting selected
React Code:
<div className="resizer"
tabIndex={-1}
onMouseDown={this.MouseDown}
/>
private MouseDown(evt: any) {
this.viewState.resizing = true;
const {ownerDocument} = ReactDOM.findDOMNode(this);
ownerDocument.addEventListener('mousemove', this.MouseMove);
ownerDocument.addEventListener('mouseup', this.MouseUp);
this.setState(this.viewState);
}
private MouseMove(evt) {
this.viewState.width = width;
this.viewState.height = height;
if (evt.preventDefault) {
evt.returnValue = false;
evt.preventDefault();
}
else {
evt.cancelBubble = true;
}
this.setState(this.viewState);
}
Instead of making evt.preventDefault(); in mouse move make it in mousedown/Click event itself
private MouseDown(evt: any) {
this.viewState.resizing = true;
const {ownerDocument} = ReactDOM.findDOMNode(this);
evt.preventDefault();
evt.stopPropagation();
ownerDocument.addEventListener('mousemove', this.MouseMove);
ownerDocument.addEventListener('mouseup', this.MouseUp);
this.setState(this.viewState);
}
If the issue is that the page gets selected with blue color, there is another approach to prevent selection.
Try this :
<body onselectstart="return false">
Try this pattern:
if (event.preventDefault){
event.preventDefault();
}
else {
event.returnValue = false;
}
I am creating a slider based on master slider I want to remove scroll event on thumb-list so that user can not scroll thumb list .I checked all the option in admin site but not working and no option for stop thumb scroll.I also tried jquery but not succeed any help should be appreciated I want to stop scroll only on the thumb list not whole body.
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
disableScroll();
Try using this css it will block scrolling
body, html {
overflow-x: hidden;
overflow-y: auto;
}
On my site I have it so my scroll is locked:
body {
overflow: hidden;
height: 100%;
}
and on click of buttons it scrolls to a certain div, all the divs are beneath each other, I would like to know if it is possible to check if the user 'tries' to scroll down or up, while scroll is locked, so if they try scroll down with the mouse wheel, I want to know how to do this so I can scroll down or up to the next div.
Any help is appreciated.
This will tell you if they are scrolling down or up. Then you would have to deal with the transition by yourself.
But in any case, if you are looking for a more tested solution, I would encourage you to use an already existent plugin such as fullPage.js which will provide old browser compatibility, touch detection, a proper solution for trackpads and Apple laptops/Magic Mouse, resize support and a lot of other useful features.
addMouseWheelHandler();
function MouseWheelHandler(e) {
// cross-browser wheel delta
e = window.event || e;
var value = e.wheelDelta || -e.deltaY || -e.detail;
var delta = Math.max(-1, Math.min(1, value));
//scrolling down?
if (delta < 0) {
console.log("scrolling down");
}
//scrolling up?
else {
console.log("scrolling up");
}
return false;
}
function addMouseWheelHandler() {
if (document.addEventListener) {
document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
} else {
document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
}
}
ok... I might be a lazy one to search but it is a bit annoying that all I can find is
"how can i set scroll down event" when I searched "how do i prevent scroll down".
in my javascript code, I set event for down arrow key. When I press down arrow
from the browser, the browser not only does an event I set, but also does
scrolling down the page which is not I intended to. So here is my question.
How can I disable scroll down function which occurs when I press down arrow?
any help will be appreciated.
If you want to prevent the vertical scrollbar and any vertical scrolling action by the user, you can use this javascript:
document.body.style.overflowY = "hidden";
Or, this can also be set with a CSS rule:
body {overflow-y: hidden;}
On the other hand, if what you're trying to do is to prevent the default key handler for the down arrow from doing anything after you process the down array, then you need to call e.preventDefault() like this:
function myKeyDownHandler(e) {
// your code here
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // older versions of IE (yuck)
}
return false;
}
A cleaner way if you need to do this in more than one place would be to make your own cross browser function for this:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // older versions of IE (yuck)
}
}
function myKeyDownHandler(e) {
// your code here
preventDefault(e);
return false;
}
This is one of those perfect examples where a cross-browser framework (jQuery/YUI/etc) saves you time because they've already done all this cross-browser work for you.
Here's an interesting article on preventDefault and stopPropagation().
Here is an example page that doesn't allow for the use of the arrow keys for scrolling:
<script>
document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};
</script>
<body style="height:3000px;">
</body>
Is there any way to completely disable web page scrolling in an iPhone web app? I've tried numerous things posted on google, but none seem to work.
Here's my current header setup:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
doesn't seem to work.
Change to the touchstart event instead of touchmove. Under One Finger Events it says that no events are sent during a pan, so touchmove may be too late.
I added the listener to document, not body.
Example:
document.ontouchstart = function(e){
e.preventDefault();
}
document.addEventListener('touchstart', function (e) {
e.preventDefault();
});
Do not use the ontouchmove property to register the event handler as you are running at risk of overwriting an existing event handler(s). Use addEventListener instead (see the note about IE on the MDN page).
Beware that preventing default for the touchstart event on the window or document will disable scrolling of the descending areas.
To prevent the scrolling of the document but leave all the other events intact prevent default for the first touchmove event following touchstart:
var firstMove;
window.addEventListener('touchstart', function (e) {
firstMove = true;
});
window.addEventListener('touchmove', function (e) {
if (firstMove) {
e.preventDefault();
firstMove = false;
}
});
The reason this works is that mobile Safari is using the first move to determine if body of the document is being scrolled. I have realised this while devising a more sophisticated solution.
In case this would ever stop working, the more sophisticated solution is to inspect the touchTarget element and its parents and make a map of directions that can be scrolled to. Then use the first touchmove event to detect the scroll direction and see if it is going to scroll the document or the target element (or either of the target element parents):
var touchTarget,
touchScreenX,
touchScreenY,
conditionParentUntilTrue,
disableScroll,
scrollMap;
conditionParentUntilTrue = function (element, condition) {
var outcome;
if (element === document.body) {
return false;
}
outcome = condition(element);
if (outcome) {
return true;
} else {
return conditionParentUntilTrue(element.parentNode, condition);
}
};
window.addEventListener('touchstart', function (e) {
touchTarget = e.targetTouches[0].target;
// a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
scrollMap = {}
scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollLeft > 0;
});
scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollTop > 0;
});
scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollWidth > element.clientWidth &&
element.scrollWidth - element.clientWidth > element.scrollLeft;
});
scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollHeight > element.clientHeight &&
element.scrollHeight - element.clientHeight > element.scrollTop;
});
touchScreenX = e.targetTouches[0].screenX;
touchScreenY = e.targetTouches[0].screenY;
disableScroll = false;
});
window.addEventListener('touchmove', function (e) {
var moveScreenX,
moveScreenY;
if (disableScroll) {
e.preventDefault();
return;
}
moveScreenX = e.targetTouches[0].screenX;
moveScreenY = e.targetTouches[0].screenY;
if (
moveScreenX > touchScreenX && scrollMap.left ||
moveScreenY < touchScreenY && scrollMap.bottom ||
moveScreenX < touchScreenX && scrollMap.right ||
moveScreenY > touchScreenY && scrollMap.top
) {
// You are scrolling either the element or its parent.
// This will not affect document.body scroll.
} else {
// This will affect document.body scroll.
e.preventDefault();
disableScroll = true;
}
});
The reason this works is that mobile Safari is using the first touch move to determine if the document body is being scrolled or the element (or either of the target element parents) and sticks to this decision.
If you are using jquery 1.7+, this works well:
$("donotscrollme").on("touchmove", false);
This should work. No more gray areas at the top or bottom:)
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
But this also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: https://github.com/joelambert/ScrollFix.
Disable:
document.ontouchstart = function(e){ e.preventDefault(); }
Enable:
document.ontouchstart = function(e){ return true; }
'self.webView.scrollView.bounces = NO;'
Just add this one line in the 'viewDidLoad' of the mainViewController.m file of your application. you can open it in the Xcode and add it .
This should make the page without any rubberband bounces still enabling the scroll in the app view.
The page has to be launched from the Home screen for the meta tag to work.
document.ontouchmove = function(e){
e.preventDefault();
}
is actually the best choice i found out it allows you to still be able to tap on input fields as well as drag things using jQuery UI draggable but it stops the page from scrolling.
I tried above answers and particularly Gajus's but none works. Finally I found the answer below to solve the problem such that only the main body doesn't scroll but other scrolling sections inside my web app all work fine.
Simply set position fixed for your body:
body {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}