I use perfect-scrollbar https://github.com/mdbootstrap/perfect-scrollbar for custom scrollbar. The scrollbar is visible only when you mouse hover the container.
How can I show the bar only on scroll event and hide it on scroll end?
You can try using the javascript onscroll() function. Try something like this-
<html>
<body onscroll="bodyScroll();">
<script language="javascript">
var scrollTimer = -1;
function bodyScroll() {
document.body.style.backgroundColor = "white";
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
document.body.style.backgroundColor = "red";
}
</script>
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
</div>
</body>
</html>
This code is from another stack question- How do I know when I've stopped scrolling?
Link to onscroll() event in js- https://www.w3schools.com/jsref/event_onscroll.asp
Related
Currently I'm using WordPress and Elementor for my website builder. I want to prevent scrolling on my page before clicking specific button. The script that I use is working to prevent the scrolling but after I click the button it still prevent my webpage to scroll. Im using this code:
<script>
disableScrolling()
document.body.style.overflowY = "hidden";
document.body.style.heigth="100vh"
document.getElementById("open-invitation").onclick = function() {
myFunction()
};
function myFunction() {
playAudio()
document.body.style.overflowY = "unset";
enableScrolling()
}
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){
window.scrollTo(x, y);
};
}
function enableScrolling(){
window.onscroll=function(){};
}
</script>
This code work well for prevent scrolling but when I click the button with the Id "open-invitation" that I set the onclick function it still prevent scrolling and stuck my page on the first column
I have try to separate the onclick function and put it beside the button that assign to it and still didn't work I'm using elementor and also I put every id and CSS id with "open-invitation" and also it wont help
<html>
<head>
<title>How to disable scrolling using JavaScript?</title>
<style>
.scrollable-place {
height: 3000px;
}
</style>
</head>
<body>
<h1 style="color:blue">
Welcome To Our Website
</h1>
<p>Click the buttons below to enable or disable scrolling.</p>
<p class="scrollable-place">
<button>Disable Scrolling</button>
<button>Enable Scrolling</button>
</p>
</body>
<script>
functiondisable() {
// To get the scroll position of current webpage
TopScroll = window.pageYOffset || document.documentElement.scrollTop;
LeftScroll = window.pageXOffset || document.documentElement.scrollLeft,
// if scroll happens, set it to the previous value
window.onscroll = function() {
window.scrollTo(LeftScroll, TopScroll);
};
}
functionenable() {
window.onscroll = function() {};
}
</script>
</html>
I have set a Scroll event to trigger fade out or fade in effect for "$("#btn")" , but I am not even able to detect the scroll event when its is scrolled, when check the value of scroll it return as 0, due to which it is not reflecting anything.
Issue: Not able to detect any kind of scroll event and not able to get scrolled values
Here is the which I tried
https://jsfiddle.net/evwrs0jq/1/
$(document).ready(function(){
$("body").on("scroll", function(){
alert();
var currentScroll = $(this).scrollTop()
var BtnAction = $("#btn");
if (currentScroll > offset) {
BtnAction.fadeOut(duration);
} else {
BtnAction.fadeIn(duration);
}
offset = currentScroll;
});
});
I guess you want this: https://jsfiddle.net/evwrs0jq/2/
<div id="test" ...
$("#test").on("scroll", function(){ ...
The body itself doesn't scroll here, it is the div that scrolls. That's why your alert didn't show up.
When i am using the above function in javascript div to auto scroll in chat box
but i am not able to scroll up to bottom.
window.setInterval(function() {
var elem = document.getElementById('chatlog');
elem.scrollTop = elem.scrollHeight;
}, 10);
The chatlog is a div in my code and I have put above function to scroll the replies. Now I cannot scroll up.
This is logical mistake. In your code every 10 ms your script will scroll div to bottom. There are many variants how to implement autoscroll behaviour. One of them use flag, which will set up by checkBox (autoscroll). If checkBox is selected script will scroll down, if deselected script will do nothing.
Something like:
window.setInterval(function() {
if (needAutoScroll) {
var elem = document.getElementById('chatlog');
elem.scrollTop = elem.scrollHeight;
}
}, 10);
My guess is , since it is scrolling down to the bottom of the div every second , you are not able to scroll up. So on scroll up you have to clear the setInterval function.
You can try this in you chatlog div.
<div id="chatlog" onscroll="myStopFunction()">
function myStopFunction() {
if document.body.scrollTop <= 0 {
console.log("scrolling down")
} else {
console.log("scrolling up");
clearInterval(myVar);
}
}
Again on scroll down you can trigger the setInterval function.
I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}
Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/
one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>
Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>
Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.
My .scrollBottom button works, but once it auto scrolls to the bottom I can't manually scroll back up because it is active and constantly scrolling down. What does it need for it scroll to absolute bottom and then STOP?
JavaScript
var timeOut;
function scrollToBottom() {
if (document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0){
window.scrollBy(0,20);
timeOut=setTimeout('scrollToBottom()',10);
}
else clearTimeout(timeOut);
}
HTML
BUTTON
I found that by removing the timeOut=setTimeout('scrollToBottom()',10);
the button scrolls down by 20 pixels on press.
With that information - I changed the window.scrollBy(0,20); to a ridiculous number like: window.scrollBy(0,2000000);
so I got this code:
var timeOut;
function scrollToBottom() {
document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0
window.scrollBy(0,2000000);
}
And paired with
html {
scroll-behavior: smooth;
}
It does the trick :)