So, I'm trying to disable scrolling event when a user hovers on a container, there are some solutions on SO but they use jQuery and none of them seem to work or they are not the solution I'm looking for. I don't want to disable the scrollbar as that would cause bad user experience (scrollbar causing widths of the containers to increase/decrease). Is there any js way of achieving this?
For example,
<body>
<div onScroll={()=> }>Container</div>
Content here
</body>
that ?
const scroll_stopper = document.querySelector('#StopSrollonHover')
scroll_stopper.onmouseover = () =>
{
document.body.classList.add('noScroll')
}
scroll_stopper.onmouseout = () =>
{
document.body.classList.remove('noScroll')
}
.noScroll {
overflow: hidden !important;
}
body {
height: 200vh;
}
#StopSrollonHover {
display : block;
margin-top : 25vh;
height : 100px;
background : yellow;
}
<div id="StopSrollonHover"> </div>
Related
I'm trying to make a dropdown and riseup banner without using jQuery.
I want it to descend and rise smoothly when the triangle will be pressed, as in the picture. The triangle decorated as text for now (but it can be as button too).
The question is how to change the behavior of an element (triangle) after pushing it several times. If I pressed it for the first time, the banner will dropdown and then the triangle must change its direction to up, and 'Show' will change to 'Hide'. If I pressed it again, the banner will rise up and the triangle must change its direction to go down.
Adding a picture for clarity:
According to muka.gergely I simplified the example for myself:
HTML:
<div class="dropdown-wrapper">
<div class="btn-dropdown">
Show ▼
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
</div>
JavaScript:
<script>
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
/* Changing the name of the 'Banner' is not working */
/* const initialText = "Banner"
/*if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) {
btn.textContent = 'Hide a Banner';
} else {
btn.textContent = initialText;
}
*/
e.target.classList.toggle('open');
});
})
</script>
CSS:
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
max-height: 500px;
transition: all 1.50s;
}
jsfiddle
For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property.
Max-height is not required here and messes with the css transition.
And the second transition property is not needed as it is already defined.
.dropdown-content-container {
overflow-y: hidden;
height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
}
For your second problem of changing the name, well you must put the text you want to change into an element so you can access it directly and only change that label and not all of the element (including the container).
So first we need to change the HTML code (I used span but it doesn't matter)
<div class="btn-dropdown">
<span class="dropdown-content-label">Show ▼</span>
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
and then we need to slightly adjust the JS code to fit this HTML adjustment by getting the label and not the whole dropdown element.
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
const initialText = "Show ▼"
const label = btn.querySelector(".dropdown-content-label");
if (label.textContent.toLowerCase() === initialText.toLowerCase()) {
label.textContent = 'Hide ▲';
} else {
label.textContent = initialText;
}
btn.classList.toggle('open');
});
})
I have this strange bug
I have an div #page that I set to overflow :scroll, and i have the body with overflow:hidden because i want to prevent the pull down, and make the site feel like an "app"
html,body {
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
#page {
overflow: scroll;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
pseudo page
<div #page>
<div .image>
<div .image>
<div .text>
<div .image>
<div .text>
</div>
inside the #page I have divs with images and text like in a long one-pager.
for some strange reason due to knows which conflict, when I scroll the #page it works well until I hover an image , not a text, contained in the page and in that case the scroll-wheel of my mouse wont scroll anymore. almost like the images overwrite the scroll.
I can't use pointer-events:none because of other reasons
add in your code
window.onscroll = () => {
window.scrollTo(0,0);
};
blocked the scroll
for reset:
window.onscroll = ()=>{
}
I created a carousel similar to the one on Instagram that is working, but I realized that if I move the scroll y of the parent element before the scroll x movement of the child element ends it will not end.
gif of the example below ...
note: sorry for bad English, not my native language.
code
.container {
width: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
.x {
margin-top: 30px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
div {
flex: 0 0 auto;
scroll-snap-align: start;
width: 100vw;
height: 100vw;
}
.x-item1 {
background: green;
}
.x-item2 {
background: blue;
}
}
}
<Container>
<div className="x">
<div className="x-item1" />
<div className="x-item2" />
</div>
... other divs
</Container>
--->> Example Gif !! <<---
I found a solution that, in my opinion, meets my proposal without losing the performance of the functionality ...
I just thought that there could be a delay in scrollIntoView, like "behavior: smooth" ...
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollIntoView
but it didn't work if someone wants to add an improvement, thanks.
in the container I put an "onTouchStart"
<Container className="works" onTouchStart={() => handleCarousel()} >
<div className="x">
<div className="x-item1" />
<div className="x-item2" />
</div>
... other divs
</Container>
function handleCarousel...
const handleCarousel = () => {
const works = Array.from(document.querySelectorAll('.work-content'));
const carousels = Array.from(document.querySelectorAll('.work-carousel'));
carousels.forEach(carousel => {
if (carousel.scrollLeft % window.innerWidth !== 0) {
const item = document.querySelector(
`.work-content:nth-child(${
works.indexOf(carousel.parentElement) + 1
}) > div.work-carousel > img.work-carousel-item-active`,
); // in another function I already control which image is being viewed and add this class
const scroll = document.querySelector('.works').scrollTop; // optional: get vertical scroll value
item.scrollIntoView(); // horizontal scrolling gains focus
document.querySelector('.works').scrollTop = scroll; // optional: returns vertical scroll value
}
});
};
I believe this is the expected behavior; scrolling in one direction interrupts scrolling in the other, even scrolling that's declared manditory by Scroll Snap CSS attributes.
If you dislike this behavior, you might use a JS-based animation that programmatically scrolls the container horizontally, since this won't be affected by vertical scrolling.
Sorry I can't help more.
So I wanted to make a page like https://www.guillaumetomasi.com/ .How can I hide the scrollbar and make a custom one like that in the page.
With CSS attributes like overflow-x: hidden and overflow-y: hidden you can hide scrollbars.
The custom scrollbar and the scrolling proccess is controlled by Javascript via and events.
The thing is simple and that's, they are not using any scrolling at all, but what you feel is a modified scroll for those slides is actually a slideshow built by JavaScript functionalities. These side slideshow are nowadays in trend and gives you a feel of pseudo scroll. It will be better if you would ask how to achieve that slideshow in a web page instead of that scrolling...
The scroll bar can be hidden with css ::-webkit-scrollbar {width: 0px;}
The custom scroll bar is made with javascript. Here's an example of how it could be done:
window.addEventListener("scroll", function() {
var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");
var section3 = document.getElementById("section3");
var indicator = document.getElementById("scroll-indicator");
if (window.scrollY < section2.offsetTop ) { // If scroll height is above section 2
indicator.innerText = "1"
}
if (window.scrollY > (section1.offsetTop + section1.offsetHeight)) { // If scrolled past section 1
indicator.innerText = "2"
}
if (window.scrollY > (section2.offsetTop + section2.offsetHeight)) {// If scrolled past section 2
indicator.innerText = "3"
}
});
p {
position: fixed;
right: 15%;
top: 50%;
color: black;
font-size: 24px;
font-family: arial;
}
::-webkit-scrollbar {
width: 0px; /*This removes the scroll bar*/
}
<div id="section1" style="height: 500px; background-color: lightblue">Scroll Down</div>
<div id="section2" style="height: 500px; background-color: pink">Keep scrolling</div>
<div id="section3" style="height: 500px; background-color: Khaki">Almost there</div>
<p id="scroll-indicator">1</p>
I have an entire <iframe /> with a div as parent. That iframe came from different domain. How do you resize it bigger (add class in my case) the parent div when the iframe was click? and resize it back when a close button of the iframe is clicked?
I preferred if the button from iframe does the resize but apparently the div cannot be reached INSIDE the iframe, so I have to do it OUTSIDE the iframe.
I had the same problem and wrote a jquery plugin.
https://github.com/BergenSoft/iframeActivationListener
See example:
http://jsfiddle.net/56g7uLub/3/
How to use:
$(document).ready(function ()
{
$('iframe').iframeActivationListener();
$('iframe').on("activate", function(ev) {
$(ev.target).addClass("big");
});
});
This plugin don't use overlaying divs.
It checks if the mouse is on an inactive iframe and starts watching the activeElement of the document.
When it changes to another iframe, the custom event "activate" will be raised.
This is the best solution I found out.
You will have to create some kind of overlay to detect the initial focus event of the iframe. The close button can also be part of your website still if you show it based on class.
http://jsfiddle.net/cxtgn72g/4/
HTML
<div id="iframe">
<div id="overlay"></div>
<div id="close">X</div>
<iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe>
</div>
JS - Requires jQuery
$("#overlay").click(function() {
$("#iframe").addClass("big");
});
$("#close").click(function() {
$("#iframe").removeClass("big");
});
CSS
#iframe {
width : 500px;
height : 300px;
position : relative;
}
#iframe.big {
width : 600px;
height : 400px;
}
iframe {
width : 100%;
height : 100%;
border : none;
}
#overlay {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
}
#close {
display : none;
}
.big #close {
cursor : pointer;
display : block;
position : absolute;
right : 10px;
top : 10px;
content : "X";
background : red;
color : white;
border-radius : 25%;
padding : 8px;
}
.big #overlay {
display : none;
}
Try this:
document.getElementById("myIFrame").onclick = function(){
document.getElementById("myDiv").className = ""; //New Class Name
};
Good Luck!