Is there any way we could disable the browser scrollbar itself?
I'm not sure if this is a stupid question, but I really hope there are any alternative ideas you can suggest.
I am creating a Site following a Parallax effect with timeout. I want users to disable scrolling the browser so that it wont make the presentation screen get behind/advance, making its flow distorted.
I have already found a way to disable scrolling using mouse wheel and key strokes (thanks and Credits to this --> How to disable scrolling temporarily?) but users can change the view by clicking on the browser scrollbar itself
$('body').css("overflow", "hidden");
Should do the trick. Or add it via your stylesheet.
Related
I am interested in hearing from anyone who has experienced this problem in the past or has any idea what the cause might be.
I am using the FullCalendar V3 library and when I click on the more events pop over the scrollbar does not work and I cannot scroll down to see all of the events.
The scroll bar does not work on Google Chrome Version 87.0.4280.141 however I have checked it on Firefox 84.0.2 and it scrolls ok on that browser.
I have not changed any of the library code and I have the impression it is some JavaScript that is the cause but would not know where to start.
Thank you in advance for any ideas.
Below is the popover in question:
This is caused due to a chrome smooth scrolling issue. Assuming you have no control over the browser side and therefor cannot disable that feature. Applying this to the scrolling container inside the popup should fix the issue.
pointer-events: auto !important
Note the selector I used was.
.fc-more-popover .fc-body.fc-widget-content .fc-event-container
I was working on my website and I Was wondering how could I make it like Some other websites like Instagram after resizing.
let me explain a bit,
my website is responsive and as you already know it's style will change after you resize the width/height,
My question is, How could I prevent this,changing style instantly after resizing,and make it change only after reloading the page.
The best example is Instagram website (on desktop browser).
you can see that if you resize the page it won't change but right after reloading the page, it will change to the specified width and height.
I would be really happy if you could help me with this idea.
Regards
S.Rb
You can redirection you own page with a http get/post to check the viewport and administrate the .css that you link on the header. All the changes in css3 will be displayed without refreshing.
Can anyone please tell me how they accomplished disabling the "bounce" effect in safari on the iPhone without disabling scrolling completely? I've googled the crap out of this and i can't find a working solution.
i've tried the following:
<script>
function BlockMove(event) { event.preventDefault();}
</script>
-> this just completely disables scrolling
i've also tried scrollFix.js, and i don't want to resort to using iScroll4 or any bloated JS library. I'm stubborn but there has to be a reliable easy way to fix this right?
The only thing I can think of is you need to detect when to stop the bounce, so when you want to stop the bounce then disable scrolling.
For example - I am moving my finger down which actually moving the page content up, you need to detect if the page ha reached the top, if so then disable scrolling. When you detect the touch is moving up which means the content is moving down then enable scrolling again unless you hit the bottom of the page.
I am assuming this is the bounce effect you are talking about. It's default behavior I don't think you need to get rid of it, unless your client wants it and will not change his/her mind
I am designing a code snippet which will allow the user to scroll the items inside a div. Its more of a spinning wheel / slot machine. I know an existing solution for iPhone / iPod, but I wanted to have a simple stripped down code.
I have not used any images, and I believe this would involve CSS3 animations.
So far here is my code in jsbin. I have tried binding the touchmove event using jquery, but the alert is not popping up?
My main aim is to enable the user to scroll / swipe Up & down the items inside the div, without making the page scroll up and down. Any suggestion / edits to the code are appreciated.
My intended use for this is for mobile devices (iPhone / Android)
Thanks in advance.
you've almost been on the right side:
http://cubiq.org/iscroll-4
try iScroll.
only limitation that i encountered during my test was that you have to wrap your code in a list (ul) - though that could have been my bad
I think what you are looking for can be achieved by simply using the deafult behavior on IOS Safari (iPhone/iPad)
Just give some fixed height to the container div with overflow
e.g.
<div id="container" style="height:400px;overflow:auto">
Your content
</div>
It would scroll using 2-fingers on versions prior to IOS5 and with a single-finger move for IOS5 and later..
I'm working on making an application with adobe air and I have a div that uses overflow-y. In order for the UI to look nice and sexy, what's the best way to replace the ugly default scrollbar [link broken] with a creation of my own?
Thanks
EDIT: Everyone remember that this is on adobe air, not on a browser (I know better than to to mess with a scrollbar, that's way web -4.2)
Don't.
Users know how to to use the default platform UI widgets: they know what they look like, how they behave, etc. And the platform ones work really well.
They won't know how to use your widget. And even if you try and copy the platform one except for appearance, your widget will behave as a cheap knockoff; it will be missing features the user expects:
Does your scroll thumb grow/shrink to show the length of the document, with a minimum size such that its always grab-able — but only on platforms where that is expected?
Does middle-click scroll to the position clicked, left-click scroll down only, and right-click scroll up only, and each in proportion to where clicked on the scrollbar — on the platform where this is expected?
Does clicking in the blank space between the thumb and up or down arrow work? Does it scroll by the amount the user is expecting, which varies by platform?
Does scrolling go at the speed the user expects when the scroll buttons are held down?
How is the user dragging the thumb handled when the mouse goes outside the scrollbar? Or middle-click, on the before-mentioned platform.
Does your custom scroll bar follow the visual theme the user selected e.g., because he needs extra-high-contrast and/or extra-large widgets due to disability?
The answer to most of those is probably "no". At least, that's been my experience with web sites where the designer decided the platform scroll bars aren't cute enough.
Skin them, like you would any other flex component. To keep your code nice any clean you can specify the embed the skin files through a style in a css file.
Edit: A link on how to skin a scrollbar