We Keep Coding

How to make the scroll button appear and disappear [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I already have a button that smoothly scrolls up. But I need it to disappear when there is no scroll and appear when there is a scroll without jquery.
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 2rem;
right: 2rem;
text-indent: -9999px;
background-image: url(https://i.stack.imgur.com/nkNki.png);
}
.scrollup:hover {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi recusandae minima corrupti possimus maiores quaerat eveniet, odit, aut rem asperiores adipisci! Culpa minima facere voluptatibus eveniet, ex nisi veniam accusamus vitae modi rerum provident repudiandae, architecto doloribus a nihil. Architecto itaque laboriosam rem dignissimos accusantium eum? Nostrum, eius nam est, labore dolores veritatis qui vel fugiat a minus incidunt debitis ipsum aliquam odio reiciendis architecto ducimus pariatur voluptate ipsam iure obcaecati sunt. Repellat necessitatibus doloremque eaque delectus soluta quis nemo rem minus sunt a. Esse dolorem doloremque accusamus repellat unde quos quod non tempora repellendus neque eum sequi laborum a praesentium aperiam perferendis totam, ipsum hic sint veniam? Pariatur veritatis unde sapiente, consectetur, velit veniam ab blanditiis voluptatibus voluptatum quasi iusto! Porro, dolores eaque itaque impedit in iste pariatur! Dolores quis enim veritatis eos? Delectus et aliquid voluptate quos accusantium doloremque, temporibus harum porro eos possimus architecto amet doloribus eius illum omnis expedita, nesciunt, consequatur rem voluptatibus incidunt cupiditate molestiae tenetur. Earum iusto beatae officiis corporis, quas eum natus dolorem veniam aspernatur ratione sunt repudiandae, porro ex eligendi obcaecati alias non reiciendis numquam facere vitae perspiciatis! Iste nisi quia ut, inventore vel excepturi labore omnis, beatae reiciendis aut earum amet in totam est, iure officia odio quo quas provident accusamus laudantium nihil repellat? Molestiae eos natus sint voluptatibus porro nam nulla dolore consequatur exercitationem! Quidem ad rem cumque aperiam, aut accusamus minima aspernatur expedita, corrupti quaerat neque at nemo quo tenetur suscipit eius necessitatibus iste vitae repellendus sint illo natus culpa? Et culpa voluptatem alias dignissimos maiores a exercitationem sequi eveniet odio illo ab sed quis, fugit repudiandae architecto aliquid similique corrupti fugiat sit rem itaque molestiae. Non quia numquam, aliquam ducimus illum inventore quaerat voluptates repellendus eius, iusto, hic optio maxime magni nisi possimus perferendis minima deserunt exercitationem qui rem iste. Vero sapiente assumenda saepe temporibus iusto! Eligendi veniam dolorem odio, velit hic nisi ut saepe maxime nobis nesciunt sed, reprehenderit repudiandae dolorum beatae quod. Quisquam porro saepe deleniti et architecto, ipsam sit debitis aspernatur unde possimus recusandae vel numquam eaque perferendis eos eveniet inventore tenetur quo harum cumque. Amet corporis illum, natus obcaecati ad minus ab alias soluta deserunt dicta corrupti excepturi, exercitationem vel repellat quasi autem commodi, similique modi impedit sed nam dolor quas! Ipsa mollitia deleniti consequatur sed, cupiditate nam, optio necessitatibus fugiat incidunt velit facere veniam pariatur quis, officia delectus rem corporis at labore? Veniam tenetur dolorum quibusdam nemo dicta commodi voluptate ad sunt omnis nisi tempora officiis magni, accusamus in culpa a temporibus eaque fuga voluptas aut, quas ex rerum autem. Impedit libero sequi quae facere porro fugiat tempora ipsum reprehenderit alias dignissimos adipisci quod exercitationem maiores deserunt quos dolorem, possimus amet necessitatibus praesentium ipsam quam nihil? Libero nemo soluta delectus labore numquam nulla placeat molestias, atque veniam hic minima iste illo saepe consequuntur harum, reprehenderit modi fuga, laudantium rerum consequatur voluptatum. Beatae veritatis adipisci veniam sint? Laborum beatae sint qui natus reiciendis quo aperiam dolorem, doloremque inventore, obcaecati animi facere. Autem provident aut pariatur eveniet aliquam dicta nobis facilis quam facere molestias totam repellat illum placeat similique saepe, doloremque cum quia. Deleniti facilis minus aperiam in modi, placeat quo similique consequatur quisquam alias necessitatibus porro, totam quibusdam at! Dignissimos corporis eos, voluptatibus eaque nobis laborum quia aperiam impedit! Corrupti hic odit eum? Itaque, maxime eos. Debitis eius ea praesentium, aliquam repellat libero pariatur similique consectetur quas est deserunt! Dicta laboriosam praesentium dolores? Minima quo magni, minus debitis sit quod hic ullam eveniet nobis ut error facilis veniam explicabo iure aliquam adipisci fugiat. Aperiam voluptatem incidunt cupiditate explicabo reiciendis aliquid nihil quaerat laboriosam illum, repellendus odit in corporis iusto quibusdam autem facilis tenetur nam qui est reprehenderit? Earum alias sint eaque deleniti, ut inventore error praesentium facilis dolorem molestiae voluptas veritatis cum, repudiandae sequi fuga ipsum incidunt a, ex architecto aspernatur unde? Consequatur, error soluta facere corrupti vel rerum possimus enim dolorum consectetur qui eius neque debitis ipsum tempora, accusamus magnam praesentium perspiciatis, quos necessitatibus? Quam fugiat rerum ullam quisquam ipsum nobis numquam illo porro saepe sed repellat hic obcaecati, velit laborum quos maiores repudiandae odit dignissimos debitis ab aliquid dicta neque veniam? Tempora fugit temporibus veniam modi sed esse ab alias nemo possimus, dolores a suscipit repellat repellendus earum aperiam assumenda eligendi fuga! Error natus, magnam, et magni commodi nulla officiis voluptatum voluptas facere, deleniti incidunt ipsum vitae eum ducimus culpa qui quod harum sapiente corporis accusantium? Exercitationem corporis in ab quas sed error consequuntur consectetur officiis quasi unde, debitis excepturi temporibus voluptatibus labore dolore aspernatur ut dignissimos. Culpa fugit repudiandae corporis sapiente! Repellendus voluptas tenetur vitae quos omnis odit ipsam culpa! Sunt quis suscipit aliquam corporis non doloremque. Voluptatem qui, vero ullam voluptatibus, quam, vitae molestias odio sunt harum accusamus unde ducimus aut culpa distinctio iusto odit? Deserunt, omnis eligendi? Quaerat officia minima quam quos voluptatibus sequi quod consequuntur distinctio? Placeat architecto soluta quibusdam quod natus necessitatibus deserunt atque possimus labore? Quisquam molestias vitae quis repellendus sequi ipsa necessitatibus dignissimos facere maxime totam cumque, earum, possimus et eum aspernatur aperiam! Eligendi quas quis quo quibusdam. Repudiandae ipsa consequuntur aut explicabo fugiat deserunt. Velit aliquam quia accusamus modi ut? Reiciendis est consequatur ipsam atque voluptas, doloremque repudiandae! Fuga voluptates ratione, iure quaerat excepturi perferendis fugit veniam aspernatur, vitae ipsam dolor ut facere voluptatem dolorum deleniti perspiciatis quae debitis rem temporibus nemo voluptatum quis nesciunt corporis sequi! Aliquid ullam ratione odio similique provident. Voluptate soluta laboriosam ab eum et. Voluptate eum excepturi deserunt rem sunt est dicta qui officia praesentium vitae fuga neque assumenda hic saepe alias amet, distinctio aperiam? Fugiat id distinctio saepe esse tempore neque incidunt iure nihil deleniti, soluta laudantium, recusandae voluptatem deserunt tempora ullam architecto sit, explicabo praesentium autem labore ipsum itaque natus! Alias, ipsa? Saepe expedita sint molestiae temporibus odit reprehenderit praesentium, exercitationem architecto suscipit porro libero laborum aut alias rem. A dolore suscipit illo sunt mollitia molestias ad inventore reiciendis provident at minus, laborum odit necessitatibus ab numquam reprehenderit quaerat ducimus voluptatum accusantium nihil officia libero culpa. Magni!</p>
<a onclick="window.scroll({ top: 0,left: 0,behavior: 'smooth' });" class="scrollup">Top</a>

Using scrollTop and onscroll function, you can solve it easily. Try once.
mainDiv. scrollTop returns how many pixels vertically scrolled.Disable or enable button onscroll event listener based on scrollTop

i have done this work recently, and i create this function. i hope it help you
function showBtnToTop(){
if(window.innerWidth > 767){// 768 medium screen width
if (window.scrollY >= x){ // x is a number, and it is the position when the button disappear
$('#gotop').css("opacity", "100");// gotop is the id of the button
}else{
$('#gotop').css("opacity", "0");
}
}else{ // don't show the button in small screen
$('#gotop').css("opacity", "0");
}
}
window.addEventListener("scroll", showBtnToTop);
use this JS function to selcet the btn
let a = document.getElementById("");
and change the css property like this:
a.style.color = "blue";

Vue & Nuxt Js : why Cannot create property 'display' on string 'bottom:30px;right:30px;'?

this code is for a component to jump to the top of the page, but during run after refresh the page is no longer running and gives an error, this project is on nuxt and vue framework. Does anyone know what is the reason for this issue or what change is needed ???
Outside the nuxt firmware this code Works well, but fails in Framework After the first refresh, it no longer works and gives an error !!!
Error text :
TypeError : Cannot create property 'display' on string 'bottom:30px;right:30px;'
Vue.component('back-to-top', {
template: '#backToTop',
name: 'BackToTop',
props: {
text: {
type: String,
default: 'text'
},
visibleoffset: {
type: [String, Number],
default: 600
},
right: {
type: String,
default: '30px',
},
bottom: {
type: String,
default: '40px',
},
},
data() {
return {
visible: false
}
},
mounted() {
window.smoothscroll = () => {
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
if (currentScroll > 0) {
window.requestAnimationFrame(window.smoothscroll)
window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
}
}
window.addEventListener('scroll', this.catchScroll)
},
destroyed() {
window.removeEventListener('scroll', this.catchScroll)
},
methods: {
catchScroll() {
this.visible = (window.pageYOffset > parseInt(this.visibleoffset))
},
backToTop() {
window.smoothscroll()
this.$emit('scrolled');
}
}
})
new Vue({
}).$mount('#app')
.back-to-top-fade-enter-active,
.back-to-top-fade-leave-active {
transition: opacity .7s;
}
.back-to-top-fade-enter,
.back-to-top-fade-leave-to {
opacity: 0;
}
.vue-back-to-top {
position: fixed;
z-index: 1000;
cursor: pointer;
}
.vue-back-to-top .default {
width: 160px;
color: #ffffff;
text-align: center;
line-height: 30px;
background-color: #f5c85c;
border-radius: 3px;
}
.vue-back-to-top .default span {
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Backtotop Component</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<template id="backToTop">
<div>
<transition name="back-to-top-fade">
<div class="vue-back-to-top" :style="`bottom:${this.bottom};right:${this.right};`" v-show="visible" #click="backToTop">
<slot>
<div class="default">
<span>
{{ text }}
</span>
</div>
</slot>
</div>
</transition>
</div>
</template>
<div id="app">
<back-to-top text="Back to top"></back-to-top>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id libero fugit atque repudiandae cumque officiis, sapiente placeat? Quisquam aperiam quos quod hic natus officiis alias perferendis quibusdam in provident? Reprehenderit perferendis consequatur,
neque magnam pariatur temporibus nemo corporis necessitatibus architecto itaque voluptatum unde suscipit a nihil quod nisi minima voluptate. Natus omnis quia est iusto modi quae asperiores vitae! Eaque, eos earum. Quod quas eum magnam corporis eos.
Atque sunt impedit officia aperiam fugit beatae voluptates velit delectus fugiat nam qui, rerum perferendis ipsum, nulla recusandae nemo quas eligendi? Iste magnam ad mollitia et magni ratione aliquam fugiat alias deserunt temporibus exercitationem
iusto quaerat doloremque eveniet, quo tempora delectus fugit eius odit. Repudiandae neque itaque doloribus delectus laboriosam deserunt. Accusamus omnis iste reiciendis? Autem voluptatibus nostrum illum ipsam sed animi molestias quis dignissimos,
pariatur quisquam, consectetur mollitia rerum ut nesciunt aperiam vitae excepturi deleniti, aliquid alias qui? Debitis, similique. At corporis vero voluptates veritatis aliquid, nam quas dolores blanditiis quidem odit libero accusamus maiores a nobis
distinctio mollitia eveniet, asperiores similique. Ut distinctio modi reiciendis, aperiam aspernatur nam vel. Cum molestiae, maiores distinctio inventore earum dolor veritatis eum laborum ab voluptates numquam perferendis adipisci sed dicta at fuga
temporibus vero? Reiciendis eveniet iusto officia sint ab rerum! Sapiente, quas. Placeat, repudiandae, asperiores nostrum culpa illum, possimus saepe tenetur ea expedita harum in nemo explicabo. Quia sapiente beatae commodi libero enim distinctio
asperiores reprehenderit dolores pariatur aliquam. Natus, molestiae accusamus. Earum dolores, ea pariatur eum sint iste, quibusdam perspiciatis necessitatibus nostrum quam eius voluptas mollitia, unde velit quia beatae doloribus totam ex omnis animi
similique! Dolorum totam eum possimus quia. Aut perspiciatis, neque impedit, quasi exercitationem odio esse iusto explicabo quas quibusdam ex laboriosam labore, error eum veritatis et ratione unde delectus optio autem reiciendis nobis. Magni reiciendis
ipsam earum! Vel similique commodi accusantium maxime modi debitis laboriosam. Cumque non sint consequuntur delectus ut. Quidem non incidunt tempore, impedit distinctio harum vero dicta doloribus dolorum perferendis ducimus qui quia at? Ad asperiores
voluptate sit autem, voluptatibus odit dicta obcaecati impedit adipisci debitis aspernatur! Sit deserunt nesciunt fuga? Ipsum, vero. Animi, iste possimus consectetur non vel necessitatibus cum quo aspernatur mollitia. Dolores quae quisquam ad fugiat
officiis, omnis, quia reprehenderit sed ipsum quas veritatis esse delectus error. Minus, necessitatibus saepe, doloremque non consequuntur esse eos sit, porro mollitia deleniti consequatur assumenda? Voluptatum earum sint aspernatur, dolore consequatur
quas, ut eum est nesciunt iure voluptates blanditiis atque, repellat animi asperiores voluptatem aliquam autem. Repudiandae mollitia quam ab praesentium qui doloremque nihil velit! Accusamus tempora quos mollitia est explicabo, quia recusandae consectetur
cupiditate! Temporibus inventore dignissimos totam repellat, eius porro quae neque, adipisci magni ab commodi quidem animi fuga dolores vel officia. Expedita? Beatae atque in incidunt assumenda tempore maiores eum libero ad explicabo eligendi molestias,
provident autem totam velit laborum mollitia eius architecto adipisci culpa aperiam dolores praesentium esse minus sunt? Eos! Sit, pariatur? Quia eaque, quae animi amet repudiandae molestias nesciunt soluta eum inventore fugiat ipsam, repellat rerum
rem perspiciatis? Ea suscipit temporibus officiis. Enim id fugiat laborum eius, quod totam? Deleniti nam magni officiis delectus, odio consequatur quam temporibus itaque sequi ex cupiditate molestias debitis est? Reprehenderit, ab! Ipsam iusto temporibus
labore praesentium fuga deserunt cum modi distinctio ratione possimus. Recusandae animi, ex fugit voluptatibus obcaecati nesciunt, eligendi molestias voluptate sapiente, nulla pariatur. Enim et nisi sunt praesentium minima. Unde temporibus a eligendi
doloribus. Ipsam repudiandae voluptatibus animi non optio! Molestiae dolorem consequuntur earum nemo consectetur dicta libero beatae, eos odio accusantium itaque, fuga tenetur quod eaque. Qui unde ab quos placeat debitis nemo fugiat, aliquam nam aperiam
minus eveniet. Sunt aliquam, corrupti voluptate impedit tempore doloribus, repellendus consequuntur laborum quam non asperiores ex, at suscipit omnis tempora ipsa cum itaque iure dignissimos voluptas. Sapiente in corporis odio quisquam perferendis!
Excepturi, voluptatem. Quas voluptatum eum hic quisquam itaque, aut ratione sapiente rem iste alias libero quaerat. Molestiae ab dignissimos dolores tempora, laudantium pariatur amet totam, delectus, debitis labore temporibus atque. Praesentium, aliquid
unde necessitatibus placeat aspernatur error distinctio vitae sequi labore alias cumque enim sunt, quae quod suscipit quisquam quia a at provident, dolor qui aut consequuntur cupiditate. Officiis, fuga. Autem nisi quae laborum eveniet eligendi temporibus
et soluta veniam laboriosam recusandae quia impedit fugiat praesentium unde maiores, nam facilis adipisci distinctio voluptatum. Accusantium perspiciatis dicta aut consectetur natus voluptatem? Nobis odit saepe molestias qui eius asperiores at aliquam
natus soluta nam magnam, sed veritatis totam eaque beatae alias iusto! Facere cumque aliquid sit totam saepe accusantium nostrum porro culpa. Ducimus, expedita. Harum excepturi sapiente maxime perferendis, maiores consequatur eius corrupti sint facere
atque sit magni aliquam possimus esse enim neque eaque deserunt aliquid amet voluptatum deleniti voluptatibus fuga quasi. Quos eaque temporibus omnis maxime officia quibusdam vel impedit. Possimus officiis ipsam numquam exercitationem, enim culpa
sint illum, molestias a quidem consequatur delectus aperiam suscipit voluptas et velit hic! Optio. Reiciendis maxime impedit, excepturi illo ab dolorem et nemo voluptas dolores optio quo rerum magnam unde ullam facere doloribus commodi nam nostrum
tempore. Amet deserunt molestiae tempore inventore, porro mollitia? Qui excepturi tenetur quia eius minima odio labore fuga quod, aliquid laudantium sequi iure? Asperiores reiciendis debitis commodi repudiandae nisi ab consequatur modi ipsa, id nemo
voluptate aliquid sunt optio? Consequuntur impedit nobis provident quasi! Repellat et culpa consectetur praesentium iste, quisquam perferendis ratione facilis ex voluptatum commodi, fugiat quidem amet aut magni consequuntur a laboriosam adipisci vero
impedit inventore. Illo quae iure repudiandae reiciendis perspiciatis, accusantium quas incidunt exercitationem saepe itaque voluptates hic cupiditate. Repellendus, earum labore alias adipisci asperiores minus corporis quo quas laudantium, odit sint
corrupti dolore. Cum numquam quidem quae enim mollitia quisquam atque debitis libero accusantium ipsa eum nulla ad est maxime ducimus, corrupti exercitationem eos animi? Voluptates placeat, ipsa repellendus quidem quod dignissimos exercitationem?
Consequuntur beatae molestias ab dolor vel aliquid tenetur rerum. Fugit tenetur excepturi voluptatum blanditiis quisquam fugiat. Deserunt cupiditate similique, dolorem adipisci commodi ad eaque quas, maxime debitis itaque repellat nam! Voluptates,
ut? In, nobis iusto reprehenderit tempora voluptatibus earum quas neque alias, commodi, voluptate a. Error odio consequatur, sequi ratione dicta nam modi eos culpa? Accusamus voluptates repudiandae sunt a? Possimus omnis rem necessitatibus, enim eos
quis quas ullam, suscipit odio nesciunt iure dolores voluptas architecto veniam voluptatibus nostrum, eum recusandae assumenda in? Corrupti, iure voluptas? Consequuntur accusantium similique atque? Dolores ipsum rem magnam at soluta nesciunt, debitis
sint quidem ipsa adipisci distinctio, quas cupiditate fugiat ullam illum officia quo doloribus eveniet. Expedita quis iure nihil nulla incidunt. Perspiciatis, reiciendis. Dolorem architecto culpa accusantium maiores pariatur id tempora, sit iusto
velit asperiores, enim nesciunt suscipit laboriosam rerum, officia sint numquam amet voluptates blanditiis iure in. Officiis, eveniet? Harum, natus perferendis. Aut temporibus quasi assumenda ab molestiae, omnis veritatis, laboriosam, dolore dolores
voluptas corrupti quis adipisci. Dolore, quae blanditiis ducimus eaque impedit placeat quaerat nobis dolores enim voluptas quis sunt aperiam? Magni, animi quibusdam iusto cupiditate vero quia ipsum adipisci a facilis amet sed cumque ab architecto.
Quis quibusdam omnis temporibus obcaecati itaque impedit blanditiis, repellat laborum ex doloremque culpa eveniet! Recusandae rerum aspernatur quae beatae aut obcaecati et, deleniti perspiciatis quibusdam, veniam dolore suscipit voluptatum aliquid
tempore quod a iste dignissimos veritatis ipsa reiciendis modi velit culpa reprehenderit voluptate! Consectetur. Suscipit eum ducimus consequuntur architecto reprehenderit recusandae vitae cumque, commodi ipsam dolores maiores! Dolore, assumenda explicabo!
Sit ipsam magni dicta aliquid similique quo praesentium debitis est, quos quaerat nesciunt quis? Dolores eaque voluptatem hic vitae asperiores necessitatibus recusandae, architecto officiis repellat unde, expedita sed itaque illo quidem! Quos ad tempora
quod cumque veritatis minus error ducimus? Architecto eveniet laboriosam dolore? Id fugiat molestiae a sed assumenda eligendi, velit expedita possimus sequi ipsa tempore itaque fugit officia consequuntur deleniti praesentium doloremque nulla similique.
Ipsum numquam suscipit, ut dolores voluptatibus accusantium aspernatur. Voluptas beatae tempore culpa temporibus aliquid accusamus esse, harum et debitis consectetur numquam hic eius odio non ducimus fugiat ut id labore, aspernatur reprehenderit!
Quod voluptates id incidunt nulla voluptatum. Rem at soluta unde? Eveniet laborum cum magni iure vitae mollitia quibusdam! Odio libero distinctio maxime culpa, rerum laudantium, nam, expedita inventore doloremque ut dolorum adipisci non neque nostrum
aperiam. Quos reiciendis ipsum itaque excepturi, eos provident, aspernatur cupiditate illo, incidunt natus iste consequatur. Officia officiis nisi corporis omnis neque. Neque quod vitae itaque impedit maxime aliquam ullam quisquam adipisci. Ad nemo
nisi voluptate blanditiis, neque commodi alias iure maiores, magnam modi placeat praesentium quidem excepturi libero esse, perferendis cumque consectetur distinctio laboriosam dignissimos debitis fugiat! Cum sequi earum cumque? Debitis qui ea voluptatum
maiores nobis dolorem dolores, blanditiis sunt voluptates fugit numquam tempora, quo dignissimos nostrum neque nesciunt sit nisi officiis voluptas velit? Beatae sunt magnam ratione voluptate. Dignissimos. Adipisci amet temporibus delectus corrupti
sint minima incidunt, voluptas saepe veniam iusto voluptates hic itaque sapiente corporis blanditiis minus pariatur reprehenderit quod at? Reiciendis sit repellendus voluptas rem ratione? Eius. Placeat enim minus autem explicabo aperiam quos! Ullam
vel nobis vitae dignissimos labore id cum officia aut excepturi eligendi facere sequi minus quasi, necessitatibus magni ad blanditiis harum aliquam laudantium!
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
<script src="./script.js"></script>
</body>
</html>

The problem comes from style binding which should be like :
:style="{bottom:bottom,right:right}"

You should probably change your
:style="`bottom:${this.bottom};right:${this.right};`"
to :style='{bottom, right}'
I definitely dont think you can use ${this.bottom} in template since this is already interpreted

Thanks to user #Boussadjra Brahim , to solve this problem, the code must be changed as follows:
:style="`bottom:${this.bottom};right:${this.right};`"
to this :
:style="{bottom:bottom,right:right}"
in short :
:style="{bottom,right}"
Thanks to all the friends who responded :)

How to check that window.pageX is increasing or decreasing in js?

window.addEventListener('mousemove', function(){
if(magic happens){
console.log("yes pageX is increasing");
}
else{
console.log("no pageX is decreasing");
}
});
what is that magic bro plzz tell me?? what is wrong with stack overflow

You can compare the previous scroll height with the current scroll height to find if it is increacing or decreacing.
window.onscroll = function() {
if (this.previousPageY < window.scrollY) {
console.log("yes pageY is increasing, it's at" + window.scrollY);
} else {
console.log("no pageY is decreasing, it's at" + window.scrollY);
}
this.previousPageY = window.scrollY;
}
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique aut velit odio maxime ex nam quaerat fugit minima expedita aliquam. Illum itaque rem veritatis odit deserunt commodi inventore nam quo!</span> <span>Beatae inventore voluptate nihil consequuntur iure laudantium adipisci. Molestiae, molestias fugiat ducimus perspiciatis similique et? Inventore accusamus sequi deleniti perspiciatis, consequuntur necessitatibus explicabo est ab omnis labore, debitis dicta nemo.</span> <span>Laudantium illum delectus ipsam quaerat eos ullam cum provident accusamus ex beatae, impedit, obcaecati blanditiis fugiat. Illum ipsum, ullam nam temporibus aspernatur eius deleniti nulla ipsa est sit molestias quos!</span> <span>Dolorum earum illum minus alias repellat illo eaque dolore sapiente. Ad quam dolor est optio, eum autem deserunt dicta dolores dolorum eligendi similique neque, minus eaque? Fugiat dolor aut nisi.</span> <span>Fugit quisquam asperiores, aut officia consequatur distinctio velit iusto molestias eum repellendus, modi animi dolore in facere atque dignissimos quasi molestiae nisi? Assumenda, quia sunt debitis accusantium nihil aspernatur provident.</span> <span>Voluptatem, fuga quis laudantium fugiat animi sequi molestiae totam amet dolorum ducimus quia omnis beatae cum facere harum maiores odio tempora atque. Explicabo illum recusandae est fuga, culpa et fugiat?</span> <span>Accusamus, veritatis. Sint amet dolorem quo recusandae ad praesentium reiciendis, adipisci nihil. Dignissimos nihil nemo deserunt architecto. Facere aspernatur rerum asperiores voluptates sunt. Alias error dignissimos eos repellendus voluptatem. Possimus.</span> <span>At rem, possimus nobis blanditiis quidem totam illo qui perspiciatis, ducimus, assumenda saepe expedita incidunt modi repellat voluptates? Perferendis corporis aliquam fugiat nihil eligendi at? Enim obcaecati commodi esse sed!</span><p><span>Nobis sapiente quibusdam facilis porro. Commodi a est distinctio rerum repudiandae consectetur consequatur ea voluptatum, quia quibusdam modi possimus porro tenetur odio! Voluptatum voluptatibus saepe optio magni aperiam! Deserunt, soluta.</span> <span>Soluta saepe ipsa nemo consequuntur alias ducimus quo quisquam sunt culpa similique quos accusantium animi temporibus, dolorum, deleniti eius nobis veritatis, dolorem natus illo nulla repellat! Fugiat itaque nesciunt cupiditate.</span> <span>Quas consequatur, necessitatibus ex, voluptatem nam incidunt expedita, soluta neque accusantium assumenda dolorem corporis aperiam tempora unde iusto tenetur quisquam quod animi mollitia deserunt hic sed. Non aperiam id blanditiis!</span> <span>Saepe soluta nesciunt repudiandae, est quae delectus accusamus non ullam quo laborum quia? Obcaecati doloribus similique quo totam officiis iure, adipisci sunt ducimus suscipit? Ab iure earum explicabo atque ratione.</span> <span>Repudiandae quis eligendi perferendis eius dolore ea corporis adipisci quod vitae molestiae tempore non esse ipsum ratione architecto, distinctio eos necessitatibus aperiam repellendus repellat tempora! Nobis consectetur quas eum quasi?</span> <span>Facere ipsum est esse fuga id iusto nostrum molestiae non asperiores ducimus sapiente sit ratione voluptas, voluptatibus doloremque molestias quas! Expedita autem facilis consequatur, minus nemo non laboriosam nisi distinctio.</span> <span>Saepe enim id voluptate tenetur nostrum magnam, numquam pariatur labore consequuntur, magni commodi quos suscipit placeat, culpa nulla quae quas fuga incidunt sint quaerat modi minus iusto consectetur. Officiis, numquam.</span> <span>Ex eaque illum amet commodi earum, distinctio perferendis, esse laborum odio iste similique quasi dolorem pariatur nobis reiciendis corporis laboriosam libero. Commodi debitis pariatur dolorem distinctio nam quaerat omnis saepe.</span><p><span>Laudantium expedita, numquam sapiente pariatur quibusdam nostrum aspernatur sed adipisci incidunt commodi, consectetur alias assumenda quasi placeat. Laborum, blanditiis. Eligendi, ea impedit. Optio nobis iste corporis esse illo est aliquid!</span> <span>Animi laudantium cupiditate quidem at nesciunt esse nemo recusandae itaque ratione voluptatum voluptates provident libero earum commodi quo assumenda cum voluptatem, maiores pariatur et dicta quod labore maxime. Reprehenderit, culpa!</span> <span>Obcaecati delectus perspiciatis voluptates, earum quam, dicta quod reiciendis consequatur aliquid velit doloremque ad praesentium pariatur recusandae iure minima eum magnam, harum quo ipsam? Saepe voluptas aut quam perspiciatis placeat.</span> <span>Sapiente veritatis incidunt praesentium expedita corporis, consequatur porro ullam quia unde quod quo laudantium ad error minima, facere ab cupiditate labore necessitatibus sunt exercitationem officia! Quas rerum eligendi cumque voluptas?</span> <span>Repellendus libero maxime doloribus deserunt tempore velit recusandae fugit dolore numquam et magni eligendi dignissimos molestiae saepe ullam vero illum rerum reprehenderit accusamus debitis dicta sint a, in sit. Incidunt.</span> <span>Cupiditate quam quo maiores fuga! Numquam dolorem sed placeat enim tenetur eum ratione reprehenderit aliquam expedita vel. Accusantium aliquid ab cum, quisquam dicta, aperiam dignissimos libero sapiente similique repellendus quas.</span> <span>Enim, obcaecati dolore. Dolore, facere voluptatibus enim fuga officiis quos debitis laboriosam deserunt obcaecati dignissimos numquam harum ea blanditiis eligendi est laborum maxime sapiente. Ad odio voluptates odit a eum.</span> <span>Minima excepturi odio labore blanditiis id, magnam odit? Autem exercitationem nobis voluptatibus, ad nam voluptatem repudiandae veritatis expedita earum voluptate nesciunt! Est omnis autem animi! Soluta tenetur sequi hic non.</span>

Make overlay scrollbars? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is it possible to make an overlay scrollbar?
Basically, I have a parent div with child divs inside. I'd like to make the vertical scrollbar overlay on top of the child divs instead of the scrollbar occupying space in the parent div and pushing the child divs to the left.
I'm planning to make the scrollbar transparent and only show it when the parent div gets hovered.
Is that possible with just css or does it need javascript? Please help thanks

I've a solution for you. Give a try to the code given below. And don't forget to put the simplescrollbar.js script in your code using this tag. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
let scrollDiv = document.querySelector(".area");
SimpleScrollbar.initEl(scrollDiv);
body {
padding: 2rem;
background: #eee;
}
.area {
position: relative;
background: white;
height: 250px;
overflow: hidden;
}
.ss-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.ss-content {
height : 100%;
width : 100%;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.ss-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-container:hover .ss-scroll {
opacity: 1;
}
.ss-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
<div class="area" ss-container>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed cum quisquam sapiente ab consequatur natus ducimus obcaecati minus rerum adipisci laudantium debitis, perferendis pariatur iste provident dolorum ratione voluptate, repudiandae placeat inventore amet quasi ea facere? Delectus numquam vel inventore quasi excepturi. Minus nulla dolore ad animi pariatur provident assumenda dolorum voluptatem porro harum quo aspernatur error placeat sapiente, magnam, atque id molestiae dignissimos corrupti nobis doloremque iure. Voluptate nulla itaque vitae provident, voluptatem numquam sequi suscipit ducimus similique quidem, neque minima architecto tempore asperiores, nihil quae ratione dicta quia unde consectetur tenetur! Aspernatur eveniet dolorem nesciunt sint et eligendi enim quidem blanditiis tenetur! Blanditiis non modi amet, quaerat, vitae consectetur placeat porro dicta, ipsum natus ea possimus. Odio magni possimus modi nemo doloribus corrupti tempora. Aliquid eos error modi non repudiandae illum atque voluptatibus? Odio quod placeat facere sed eligendi, adipisci commodi natus magni soluta dignissimos, aperiam fuga magnam saepe itaque voluptas optio fugiat veritatis velit architecto dolore animi cum sequi quas accusantium! Vel iusto autem sit rerum maxime. Blanditiis libero natus at necessitatibus, odio sed perspiciatis exercitationem quisquam, officiis impedit, a nobis. Exercitationem hic reprehenderit illo, laboriosam ab eaque error sequi, ea expedita rem possimus repellendus numquam delectus est cum maiores neque nihil natus eius. Expedita esse quae, minus, est aspernatur ratione sed aliquid odio ut architecto nostrum provident neque placeat tempora, ipsum natus eum repellendus debitis alias nobis dolorem doloremque laboriosam voluptatem similique. Quisquam rerum molestias ab voluptas voluptatum sit, tenetur odio. Quidem nesciunt assumenda molestias velit harum deserunt culpa vitae beatae veritatis, eum, soluta mollitia numquam cumque! Facilis, dolores sunt aperiam sint molestias iure quidem architecto provident natus quae ab, quia labore tempore minima aliquid voluptatem earum optio tempora. Optio placeat eligendi praesentium quos atque. Similique aliquid neque nisi aliquam molestiae natus, recusandae ullam tempora et minus cum repellat cupiditate fugiat dolorem blanditiis consectetur ea commodi, maxime, odit voluptate hic non ab eaque? Eos exercitationem cumque quas harum aut deserunt ipsam cupiditate doloribus dolorum non doloremque adipisci est, explicabo mollitia voluptates laboriosam molestiae sapiente at ex laborum id? Voluptatem nostrum dicta, tempore eaque quibusdam praesentium fugiat laborum odio nemo adipisci, impedit porro iste, aut sunt consectetur soluta quia nisi repudiandae voluptatibus expedita ab rem iure. Dolorem nemo eaque architecto atque nihil, consequatur voluptates? Consequuntur vero a repudiandae molestias repellat provident minima facilis placeat, perferendis quo laudantium quisquam tenetur fugiat! Vitae repellat ducimus officia. Similique quod sunt quaerat, eum at esse iste. Pariatur sit animi mollitia! Molestiae, quia voluptatum? Expedita, voluptas explicabo. Rerum soluta dolorem expedita optio nostrum ex placeat laudantium minima voluptate, cum neque beatae, pariatur dicta error rem eum aliquam a deleniti quidem doloremque iure aperiam illo atque animi! Soluta facilis eligendi iure magnam. Quasi, quam numquam explicabo quas aliquam cum natus quod iusto, eligendi tenetur ex facilis, modi ut accusantium quibusdam nostrum labore! Provident laborum dolore ipsa sit. Dolore totam tempore quisquam adipisci iste tenetur ducimus saepe quae asperiores quibusdam possimus, maxime voluptatibus non eum praesentium quas dolores similique fugiat placeat numquam illum omnis autem voluptatum! Impedit exercitationem quam quisquam nisi consectetur minima optio dolore dicta! Maxime qui fugiat, beatae possimus modi fuga, unde, adipisci culpa magnam eum a velit. Voluptas libero eos dolores consequuntur nisi corrupti vel rem doloremque ut consequatur, odit magni esse aliquid aperiam possimus eveniet, magnam quaerat exercitationem. Maiores cum officiis reprehenderit ea nam, iure magni esse quos velit praesentium eius unde, laudantium fugit vitae quasi temporibus. Iste fuga iure numquam velit culpa exercitationem officia quis beatae? Deserunt sint eum accusantium, blanditiis fugit harum ex omnis qui officiis magnam nobis eius voluptatibus tenetur, rem dignissimos aut et tempore ipsum cumque commodi laudantium? Maxime praesentium, alias dolores, eos veritatis velit ex ut aliquam tempore est corporis dolorem. Odio, rem ratione. Numquam repellat cum rerum libero sapiente itaque corrupti in ut nihil culpa vitae, laborum molestias nostrum repudiandae eligendi sequi quo officia quibusdam modi commodi consequuntur nisi nobis vero voluptates. Praesentium officia rerum a incidunt ratione, odio quaerat alias, optio repellendus doloremque natus vero quae debitis dolores dignissimos voluptas labore accusantium aliquam asperiores ut eius dolorem. Dolor assumenda at deserunt numquam atque delectus labore, eum, aut dolorem ex, et hic vel rerum fugit! Et tempore harum natus illum dicta maxime magnam delectus ad praesentium reprehenderit nihil nulla aliquid error, fuga ratione dignissimos cumque temporibus blanditiis. Eum doloribus sed odit exercitationem quia quibusdam vero impedit id harum molestias! Distinctio iusto aspernatur quaerat tempora pariatur iste eaque corrupti, vel magnam temporibus recusandae possimus perspiciatis itaque repellat mollitia reprehenderit hic autem quis ex maxime laborum exercitationem placeat ab. Saepe provident incidunt, modi porro aut magni ducimus odit ut minima perferendis, itaque nobis rem explicabo dolor. Voluptates dicta in error nulla vitae corporis fugiat optio. Blanditiis voluptatem sunt nihil? Nihil, dicta excepturi explicabo repellendus enim odio sed totam, fugit error nulla provident omnis saepe illum iste animi? Consequatur, veniam! Voluptates voluptatem veritatis reiciendis. Illo, veritatis pariatur ratione id minima cupiditate. Quibusdam quod deserunt alias ipsam culpa et modi fuga aut id autem. Minima neque nesciunt eligendi accusamus quam deserunt repellendus sequi culpa, cumque quaerat beatae mollitia doloribus? Nisi quibusdam quisquam temporibus. Quas laudantium pariatur totam, voluptas tempora, ad culpa dignissimos blanditiis ut, explicabo voluptatem repellat saepe tempore ipsam? Qui adipisci labore mollitia at, id facere unde aspernatur? Quis numquam a reiciendis vero possimus ut autem. Voluptatibus quas, officiis hic mollitia vero unde iste dolores delectus molestias. Perspiciatis, sit dicta officiis facere minus voluptatem qui iusto est nulla neque perferendis non ipsum minima ipsa quidem consequatur delectus. Ducimus qui quaerat nostrum nulla quis veritatis! Labore quod illo, debitis necessitatibus, repellendus omnis vitae voluptas sequi quia consequuntur velit asperiores sint porro fuga facilis vel voluptatum magni quibusdam delectus quis distinctio? Excepturi tenetur doloremque dolor. Nostrum voluptates harum quis quidem hic odit magni atque repudiandae illum, repellat et explicabo a possimus nesciunt tempore rerum sequi, blanditiis officiis. Error ullam quae labore veritatis eaque reiciendis tempore doloremque quod dignissimos optio tempora perspiciatis, voluptatum non? Animi mollitia dolorem quae impedit quos laudantium perferendis, dolore ut consectetur deserunt veritatis deleniti ipsa excepturi!
</div>

Stop autoplay youtube video when paused manually

I am using autoplay youtube video when its visible on scroll, but if I pause it manually and scroll the video off-screen, and scroll back to video it starts again.
What I want is, If I pause it manually, it should not play again even scrolling, and when i play it again, it should follow the same function of play/pause when scroll.
Please note: The snippet inn't working but if you copy the code locally, it will work.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// Load the IFrame Player API code asynchronously.
var player;
// this function gets called when API is ready to use
var playerInfoList = [{
id:'player',
userPaused: false
},{
id:'player1',
userPaused: false
}
];
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = playerInfoList[i];
var curpause = curplayer.userPaused;
var curplayer = curplayer.id;
player = new YT.Player(curplayer, {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange' : onPlayerChange
}
});
// console.log(player.getIframe())
}
}
function onPlayerReady(event) {
var curplayer = event.target.a;
// console.log(event);
jQuery(window).scroll(function() {
$offtop = jQuery(curplayer).offset().top;
$wofftop = jQuery(window).scrollTop();
// console.log(document.activeElement);
// console.log($offtop, $wofftop)
// console.log(curplayer.id+'>'+($offtop-500));
if (($wofftop > $offtop - 500) && ($wofftop < jQuery(curplayer).offset().top + 200) && !jQuery("body").hasClass("paused")){
event.target.playVideo();
} else {
//console.log(curplayer+" pausing... ");
jQuery( "body" ).blur();
event.target.pauseVideo();
//jQuery("body").removeClass("paused");
}
});
// bind events
}
function onPlayerChange(event) {
console.log(event.data);
if (event.data == '1') {
jQuery("body").removeClass("paused");
}
if (event.data == '2') {
// jQuery("body").addClass("paused");
}
}
window.addEventListener('blur',function(){
if(document.activeElement.id == 'player'){
console.log('the "play" button *might* have been clicked');
jQuery("body").addClass("paused");
}
});
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, iusto amet quisquam veniam, temporibus nesciunt ipsa ullam corporis aut, quia quis enim nihil dolores officia modi impedit odio? Non, vel.</div>
<div>Magnam molestias blanditiis voluptatum sequi tenetur veritatis ipsam, ea laboriosam, nihil eum assumenda fugiat minus, velit quia quaerat quasi ab dignissimos, delectus praesentium veniam inventore. Aut odit vero perspiciatis asperiores!</div>
<div>Debitis ab hic sed quis illum voluptatem alias, perspiciatis delectus vel voluptatibus quaerat corporis fugit officia, laudantium velit, vero atque ullam placeat a quae quisquam dolor ut repellendus! Nostrum, dolore!</div>
<div>Accusamus facilis ipsum nihil eveniet aliquid fugiat rem ratione assumenda modi ut, odio nobis suscipit. Nam sit, explicabo repellat excepturi eum cum accusantium voluptatibus, dolore expedita veritatis nisi omnis maxime!</div>
<div>Rem iste, odio quas minus porro commodi, quisquam, esse animi saepe architecto molestiae voluptate quo. Perferendis amet quisquam dolores sunt laudantium, libero minima dignissimos asperiores itaque sapiente nulla nisi at!</div>
<div>Impedit omnis rem aut ea fugiat tenetur, aperiam asperiores maxime eaque totam unde nam blanditiis aliquid officia quae quas ipsum, ex tempora illum repudiandae! Velit impedit nihil assumenda animi dolorem.</div>
<div>At quia dolore facere, quisquam corrupti accusamus ut. Pariatur beatae earum modi quis vitae. Voluptate reprehenderit labore quos ut porro pariatur soluta, veniam laudantium beatae perferendis, recusandae molestias impedit possimus.</div>
<div>Perferendis velit facere molestias, minima quae cumque repellendus rerum error ab labore? Quaerat quasi accusantium facere voluptates maiores. In deserunt, molestias, distinctio aut reprehenderit dignissimos placeat doloremque corporis voluptas delectus!</div>
<div>Expedita, amet, quaerat. Tempore, sapiente inventore nostrum sunt, accusamus ipsam ad natus consequatur error sequi ratione voluptatem adipisci dolor facilis nesciunt magnam libero quisquam. Explicabo laboriosam rem magni reprehenderit eos.</div>
<div>Sed id aut assumenda incidunt debitis ratione, earum voluptate ex excepturi iusto totam temporibus quisquam unde eos nemo explicabo deleniti ab rerum tempore aliquid laboriosam? Labore officia numquam ex voluptas.</div>
<div>Quod in voluptatum officiis vitae est sit modi, sapiente pariatur molestiae ipsum dolore atque quibusdam molestias, quam nemo libero aperiam laborum. Minus dignissimos dolores omnis asperiores, blanditiis magnam. Est, impedit.</div>
<div>Reiciendis nam ut laboriosam voluptatum soluta optio dolore quidem asperiores illum quia debitis quae ab, neque repellat maiores sed ea voluptas perferendis excepturi labore velit, quaerat, odio. Quae, minima, soluta.</div>
<div>Quasi nemo fuga ad ullam blanditiis velit tempore, accusantium, tenetur ipsa magni amet corporis cupiditate ipsum deserunt dignissimos, quos! Explicabo adipisci modi rem. Voluptatibus quibusdam officia laudantium, omnis nihil. Veniam!</div>
<div>Doloribus sunt reprehenderit odit, hic magni beatae architecto neque accusamus id? Temporibus eveniet officia quae voluptate eius earum optio voluptates et error, ad quasi! Saepe cupiditate cumque dolore debitis incidunt.</div>
<div>Deleniti dolorum saepe itaque ab dolorem amet, quidem aliquam molestias blanditiis molestiae id. Fugiat ut tempore nisi voluptatem nulla exercitationem aut, molestiae labore officiis temporibus. Sapiente atque tempora suscipit doloribus.</div>
<div>Quaerat cupiditate voluptatum iusto dolore dolorum, sequi reprehenderit, aliquam, totam quas velit impedit, non facilis suscipit quibusdam recusandae iure doloremque a deleniti quis. Nobis ullam inventore alias veniam. Iure, excepturi.</div>
<div>Voluptates dolore unde accusantium enim, sequi, nesciunt sunt amet. Omnis molestias hic soluta itaque magnam quia aperiam quisquam, similique, facere consequuntur fugiat eaque nam ratione assumenda, voluptates eum? Et, assumenda.</div>
<div>Voluptatum distinctio quos pariatur, quia officiis dignissimos ratione nam, laudantium eum ut doloremque debitis ipsam deserunt sequi, libero quae vitae cumque nihil non. Cumque fugit commodi veniam esse molestiae facere.</div>
<div>Consequuntur nemo est, temporibus placeat quod sequi aliquam error ea quam, animi, nostrum, voluptatem commodi quis eligendi maiores natus soluta laborum ex. Ratione necessitatibus qui optio alias harum. Quos, id.</div>
<div>Veritatis, doloremque obcaecati blanditiis minus incidunt autem suscipit modi, rem aliquid nemo deserunt nobis quibusdam optio vero temporibus cumque? Velit, aspernatur aliquam enim dolores, officiis nihil ab vero minima nesciunt.</div>
<div>Illo, alias aperiam. Ipsam deserunt ab illo eaque voluptatem numquam debitis cum nostrum cupiditate dolore minima voluptatum, repellendus vel illum veniam similique nobis dignissimos culpa tenetur labore veritatis tempore aliquid.</div>
<div>Blanditiis in, ut dolores magni pariatur corporis unde reprehenderit, quo ea ipsum fugit iusto at voluptatibus eum quisquam excepturi error sunt. Culpa modi pariatur ipsam beatae magni ratione eos quod.</div>
<div>Obcaecati commodi, quas. Fuga, consequuntur suscipit et consectetur temporibus molestiae necessitatibus quisquam corrupti unde architecto odio ab obcaecati quasi repudiandae optio iste reprehenderit, facere quaerat, harum reiciendis ratione praesentium sapiente.</div>
<div>Dolorum sed eaque quis nesciunt, voluptate assumenda veritatis praesentium obcaecati officiis sapiente deserunt harum ipsam dignissimos, doloribus exercitationem. Numquam minima et, nemo totam vitae. Aut, eum! Aut vitae, quod odit!</div>
<div>Aliquid dicta reprehenderit ea deserunt quis mollitia animi officiis dolor corporis vitae perferendis natus, illo ducimus dolore fugit eos facilis vero, voluptatem porro, ad. Ipsa assumenda animi, et magni dolores?</div>
<div>Hic recusandae repellendus molestiae harum modi magnam provident porro voluptate. Expedita ipsa voluptatibus earum, provident aspernatur mollitia accusamus quibusdam dignissimos qui! Cum quibusdam est esse. Quasi quo officia earum possimus?</div>
<div>Sint accusantium esse sapiente eum mollitia nihil ducimus, est fuga id neque nisi quaerat iste officia placeat quas, maxime et ea similique delectus aut, labore earum. Asperiores quos ad quaerat!</div>
<div>Sint sequi ea optio minus quia vitae doloribus. Repudiandae minus commodi quia consequatur sequi dolorum natus reiciendis aspernatur nam ipsam dolor, consectetur quod harum, odit, cumque id labore facilis quasi.</div>
<div>Tenetur sequi fugiat et nobis deserunt, voluptatibus! Soluta quaerat iste nesciunt expedita labore, repudiandae ex optio provident officia consequatur tenetur esse illo nihil, unde excepturi fugiat perferendis numquam similique nam?</div>
<div>Consequuntur assumenda vero alias. Repellendus dolore voluptas obcaecati tempore debitis, expedita id deserunt illum numquam. Alias dolorem cum ea repellendus explicabo fuga, odit corrupti voluptate esse magnam unde, quo perspiciatis.</div>
<div>Est voluptatem neque nam aliquid tenetur perferendis ullam reprehenderit, eius provident delectus quisquam, facilis quia natus quo itaque nisi deserunt at porro. Quidem numquam eaque porro esse dolores fugiat debitis?</div>
<div>Enim iste veniam voluptates odio voluptatem blanditiis, commodi dolorem eum quo vel rem nostrum in eligendi ipsa, repudiandae maxime amet. Doloremque ut eum, at, libero quo iste ipsa eveniet cupiditate?</div>
<div>Asperiores sint adipisci vero saepe quis quisquam eius earum quas, veritatis unde voluptates animi excepturi ipsum blanditiis omnis facilis quaerat nisi amet? Laboriosam quis quas, sed, illo repudiandae odio blanditiis!</div>
<div>Non, animi, amet? Rem qui tempora reprehenderit eos velit dolore, cum ut vitae minima? Quisquam veniam, doloremque eligendi fugiat aliquid minima! Ut sunt esse voluptatem nulla, iure harum sint deserunt!</div>
<div>Ipsa, voluptatibus praesentium fugit modi facere error saepe deserunt. Ea voluptatibus, repellat sunt. Cum aperiam rerum corrupti officiis distinctio, at quis veniam neque dolor, quia ipsum porro mollitia molestiae dicta?</div>
<div>Neque in soluta dolores, voluptate, autem debitis! Adipisci omnis qui, aut suscipit dolore delectus magnam veniam, sit aliquid id quaerat ut assumenda et itaque quam ipsum, repellendus nihil eaque natus.</div>
<div>Adipisci, quod, eaque nulla pariatur laborum deserunt cum ratione dolorum ut vero accusamus nisi aut alias dolor distinctio mollitia itaque aliquid ea incidunt. Explicabo animi odit minus esse doloremque cupiditate.</div>
<div>Cupiditate eum nam inventore labore doloremque possimus ullam, alias sed commodi perspiciatis aut, sunt quos? Optio unde excepturi dolore ex aut facilis eveniet consectetur sit, esse autem iure, nesciunt et.</div>
<div>Aut sint, laborum minus autem quisquam molestias quia fugiat itaque nam fuga labore, possimus iusto sunt. Architecto, placeat libero. Esse velit natus, culpa tenetur praesentium maiores. Inventore delectus, temporibus enim.</div>
<div>Repudiandae tempora dolore quam a. Assumenda aliquid ad reprehenderit amet vero architecto, quam sequi id eveniet natus vitae minima, velit, nulla voluptatem voluptate necessitatibus tempora repellendus ullam, iusto temporibus pariatur!</div>
<div>Tempora sapiente doloribus, illum magnam? Commodi culpa porro illum adipisci eveniet nulla temporibus reprehenderit impedit corrupti distinctio vel, ducimus numquam quasi deserunt accusantium eos sed mollitia sint neque ad vero.</div>
<div>Quas recusandae, quaerat quia a eaque nemo. Labore qui consequatur perferendis inventore, distinctio asperiores quam dolore! Culpa rem a tenetur odit, quisquam atque incidunt voluptatem animi recusandae quam, saepe vero.</div>
<div>Ea nostrum, nesciunt odio ducimus impedit molestias magni delectus sequi numquam esse possimus aliquam culpa laboriosam, rem a iusto dicta fugit, ratione? Pariatur quos distinctio blanditiis, vero laudantium quidem, libero.</div>
<div>Est adipisci maiores et nulla. Laboriosam veniam, dolorum esse totam repellendus necessitatibus molestiae praesentium, consequuntur, accusamus aliquam officiis, accusantium. Sint sapiente esse qui veniam accusamus delectus deserunt libero odio necessitatibus!</div>
<div>Commodi blanditiis laudantium debitis sequi, sapiente porro deserunt eaque, explicabo mollitia nam maiores iusto hic quidem earum! Eligendi mollitia ipsum voluptas unde dolorem recusandae quos ab error deserunt consectetur. Eligendi.</div>
<div>Eius aspernatur voluptates, voluptatibus pariatur fugiat voluptate suscipit corporis rem dolore repellendus hic quaerat quisquam, accusamus animi minus, quae in sunt. Repudiandae ad sunt autem iusto, quisquam pariatur totam, libero.</div>
<div>Natus, nihil, assumenda. Consequuntur, cumque odit odio placeat perferendis tempore architecto cupiditate natus nesciunt modi officiis facilis dolores, mollitia fuga magni maxime ad reiciendis, debitis sit voluptate minus sapiente praesentium.</div>
<div>Voluptatibus esse magni cupiditate obcaecati porro. Ipsam est modi, veniam libero! Laboriosam iste dolore tenetur nobis sequi eligendi vel dolorem, illo soluta minus labore tempore est recusandae, repudiandae, delectus rerum!</div>
<div>Veritatis fugiat, quod hic architecto, laudantium inventore at similique recusandae tempora, rerum deserunt vero voluptas totam aliquam, a harum minus id animi aperiam. Pariatur magni doloribus praesentium inventore illum recusandae?</div>
<div>Vero, cum consequatur qui maiores sit veritatis non harum distinctio, nobis optio ad dicta nostrum placeat vitae similique voluptatem minima quia voluptate magni voluptas officia? Dolor sed quo assumenda debitis.</div>
<iframe id="player" src="https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1;&autoplay=1&mute=1" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, iusto amet quisquam veniam, temporibus nesciunt ipsa ullam corporis aut, quia quis enim nihil dolores officia modi impedit odio? Non, vel.</div>
<div>Magnam molestias blanditiis voluptatum sequi tenetur veritatis ipsam, ea laboriosam, nihil eum assumenda fugiat minus, velit quia quaerat quasi ab dignissimos, delectus praesentium veniam inventore. Aut odit vero perspiciatis asperiores!</div>
<div>Debitis ab hic sed quis illum voluptatem alias, perspiciatis delectus vel voluptatibus quaerat corporis fugit officia, laudantium velit, vero atque ullam placeat a quae quisquam dolor ut repellendus! Nostrum, dolore!</div>
<div>Accusamus facilis ipsum nihil eveniet aliquid fugiat rem ratione assumenda modi ut, odio nobis suscipit. Nam sit, explicabo repellat excepturi eum cum accusantium voluptatibus, dolore expedita veritatis nisi omnis maxime!</div>
<div>Rem iste, odio quas minus porro commodi, quisquam, esse animi saepe architecto molestiae voluptate quo. Perferendis amet quisquam dolores sunt laudantium, libero minima dignissimos asperiores itaque sapiente nulla nisi at!</div>
<div>Impedit omnis rem aut ea fugiat tenetur, aperiam asperiores maxime eaque totam unde nam blanditiis aliquid officia quae quas ipsum, ex tempora illum repudiandae! Velit impedit nihil assumenda animi dolorem.</div>
<div>At quia dolore facere, quisquam corrupti accusamus ut. Pariatur beatae earum modi quis vitae. Voluptate reprehenderit labore quos ut porro pariatur soluta, veniam laudantium beatae perferendis, recusandae molestias impedit possimus.</div>
<div>Perferendis velit facere molestias, minima quae cumque repellendus rerum error ab labore? Quaerat quasi accusantium facere voluptates maiores. In deserunt, molestias, distinctio aut reprehenderit dignissimos placeat doloremque corporis voluptas delectus!</div>
<div>Expedita, amet, quaerat. Tempore, sapiente inventore nostrum sunt, accusamus ipsam ad natus consequatur error sequi ratione voluptatem adipisci dolor facilis nesciunt magnam libero quisquam. Explicabo laboriosam rem magni reprehenderit eos.</div>
<div>Sed id aut assumenda incidunt debitis ratione, earum voluptate ex excepturi iusto totam temporibus quisquam unde eos nemo explicabo deleniti ab rerum tempore aliquid laboriosam? Labore officia numquam ex voluptas.</div>
<div>Quod in voluptatum officiis vitae est sit modi, sapiente pariatur molestiae ipsum dolore atque quibusdam molestias, quam nemo libero aperiam laborum. Minus dignissimos dolores omnis asperiores, blanditiis magnam. Est, impedit.</div>
<div>Reiciendis nam ut laboriosam voluptatum soluta optio dolore quidem asperiores illum quia debitis quae ab, neque repellat maiores sed ea voluptas perferendis excepturi labore velit, quaerat, odio. Quae, minima, soluta.</div>
<div>Quasi nemo fuga ad ullam blanditiis velit tempore, accusantium, tenetur ipsa magni amet corporis cupiditate ipsum deserunt dignissimos, quos! Explicabo adipisci modi rem. Voluptatibus quibusdam officia laudantium, omnis nihil. Veniam!</div>
<div>Doloribus sunt reprehenderit odit, hic magni beatae architecto neque accusamus id? Temporibus eveniet officia quae voluptate eius earum optio voluptates et error, ad quasi! Saepe cupiditate cumque dolore debitis incidunt.</div>
<div>Deleniti dolorum saepe itaque ab dolorem amet, quidem aliquam molestias blanditiis molestiae id. Fugiat ut tempore nisi voluptatem nulla exercitationem aut, molestiae labore officiis temporibus. Sapiente atque tempora suscipit doloribus.</div>
<div>Quaerat cupiditate voluptatum iusto dolore dolorum, sequi reprehenderit, aliquam, totam quas velit impedit, non facilis suscipit quibusdam recusandae iure doloremque a deleniti quis. Nobis ullam inventore alias veniam. Iure, excepturi.</div>
<div>Voluptates dolore unde accusantium enim, sequi, nesciunt sunt amet. Omnis molestias hic soluta itaque magnam quia aperiam quisquam, similique, facere consequuntur fugiat eaque nam ratione assumenda, voluptates eum? Et, assumenda.</div>
<div>Voluptatum distinctio quos pariatur, quia officiis dignissimos ratione nam, laudantium eum ut doloremque debitis ipsam deserunt sequi, libero quae vitae cumque nihil non. Cumque fugit commodi veniam esse molestiae facere.</div>
<div>Consequuntur nemo est, temporibus placeat quod sequi aliquam error ea quam, animi, nostrum, voluptatem commodi quis eligendi maiores natus soluta laborum ex. Ratione necessitatibus qui optio alias harum. Quos, id.</div>
<iframe id="player1" src="https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1;&autoplay=1&mute=1" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<div>Veritatis, doloremque obcaecati blanditiis minus incidunt autem suscipit modi, rem aliquid nemo deserunt nobis quibusdam optio vero temporibus cumque? Velit, aspernatur aliquam enim dolores, officiis nihil ab vero minima nesciunt.</div>
<div>Illo, alias aperiam. Ipsam deserunt ab illo eaque voluptatem numquam debitis cum nostrum cupiditate dolore minima voluptatum, repellendus vel illum veniam similique nobis dignissimos culpa tenetur labore veritatis tempore aliquid.</div>
<div>Blanditiis in, ut dolores magni pariatur corporis unde reprehenderit, quo ea ipsum fugit iusto at voluptatibus eum quisquam excepturi error sunt. Culpa modi pariatur ipsam beatae magni ratione eos quod.</div>
<div>Obcaecati commodi, quas. Fuga, consequuntur suscipit et consectetur temporibus molestiae necessitatibus quisquam corrupti unde architecto odio ab obcaecati quasi repudiandae optio iste reprehenderit, facere quaerat, harum reiciendis ratione praesentium sapiente.</div>
<div>Dolorum sed eaque quis nesciunt, voluptate assumenda veritatis praesentium obcaecati officiis sapiente deserunt harum ipsam dignissimos, doloribus exercitationem. Numquam minima et, nemo totam vitae. Aut, eum! Aut vitae, quod odit!</div>
<div>Aliquid dicta reprehenderit ea deserunt quis mollitia animi officiis dolor corporis vitae perferendis natus, illo ducimus dolore fugit eos facilis vero, voluptatem porro, ad. Ipsa assumenda animi, et magni dolores?</div>
<div>Hic recusandae repellendus molestiae harum modi magnam provident porro voluptate. Expedita ipsa voluptatibus earum, provident aspernatur mollitia accusamus quibusdam dignissimos qui! Cum quibusdam est esse. Quasi quo officia earum possimus?</div>
<div>Sint accusantium esse sapiente eum mollitia nihil ducimus, est fuga id neque nisi quaerat iste officia placeat quas, maxime et ea similique delectus aut, labore earum. Asperiores quos ad quaerat!</div>
<div>Sint sequi ea optio minus quia vitae doloribus. Repudiandae minus commodi quia consequatur sequi dolorum natus reiciendis aspernatur nam ipsam dolor, consectetur quod harum, odit, cumque id labore facilis quasi.</div>
<div>Tenetur sequi fugiat et nobis deserunt, voluptatibus! Soluta quaerat iste nesciunt expedita labore, repudiandae ex optio provident officia consequatur tenetur esse illo nihil, unde excepturi fugiat perferendis numquam similique nam?</div>
<div>Consequuntur assumenda vero alias. Repellendus dolore voluptas obcaecati tempore debitis, expedita id deserunt illum numquam. Alias dolorem cum ea repellendus explicabo fuga, odit corrupti voluptate esse magnam unde, quo perspiciatis.</div>
<div>Est voluptatem neque nam aliquid tenetur perferendis ullam reprehenderit, eius provident delectus quisquam, facilis quia natus quo itaque nisi deserunt at porro. Quidem numquam eaque porro esse dolores fugiat debitis?</div>
<div>Enim iste veniam voluptates odio voluptatem blanditiis, commodi dolorem eum quo vel rem nostrum in eligendi ipsa, repudiandae maxime amet. Doloremque ut eum, at, libero quo iste ipsa eveniet cupiditate?</div>
<div>Asperiores sint adipisci vero saepe quis quisquam eius earum quas, veritatis unde voluptates animi excepturi ipsum blanditiis omnis facilis quaerat nisi amet? Laboriosam quis quas, sed, illo repudiandae odio blanditiis!</div>
<div>Non, animi, amet? Rem qui tempora reprehenderit eos velit dolore, cum ut vitae minima? Quisquam veniam, doloremque eligendi fugiat aliquid minima! Ut sunt esse voluptatem nulla, iure harum sint deserunt!</div>
<div>Ipsa, voluptatibus praesentium fugit modi facere error saepe deserunt. Ea voluptatibus, repellat sunt. Cum aperiam rerum corrupti officiis distinctio, at quis veniam neque dolor, quia ipsum porro mollitia molestiae dicta?</div>
<div>Neque in soluta dolores, voluptate, autem debitis! Adipisci omnis qui, aut suscipit dolore delectus magnam veniam, sit aliquid id quaerat ut assumenda et itaque quam ipsum, repellendus nihil eaque natus.</div>
<div>Adipisci, quod, eaque nulla pariatur laborum deserunt cum ratione dolorum ut vero accusamus nisi aut alias dolor distinctio mollitia itaque aliquid ea incidunt. Explicabo animi odit minus esse doloremque cupiditate.</div>
<div>Cupiditate eum nam inventore labore doloremque possimus ullam, alias sed commodi perspiciatis aut, sunt quos? Optio unde excepturi dolore ex aut facilis eveniet consectetur sit, esse autem iure, nesciunt et.</div>
<div>Aut sint, laborum minus autem quisquam molestias quia fugiat itaque nam fuga labore, possimus iusto sunt. Architecto, placeat libero. Esse velit natus, culpa tenetur praesentium maiores. Inventore delectus, temporibus enim.</div>
<div>Repudiandae tempora dolore quam a. Assumenda aliquid ad reprehenderit amet vero architecto, quam sequi id eveniet natus vitae minima, velit, nulla voluptatem voluptate necessitatibus tempora repellendus ullam, iusto temporibus pariatur!</div>
<div>Tempora sapiente doloribus, illum magnam? Commodi culpa porro illum adipisci eveniet nulla temporibus reprehenderit impedit corrupti distinctio vel, ducimus numquam quasi deserunt accusantium eos sed mollitia sint neque ad vero.</div>
<div>Quas recusandae, quaerat quia a eaque nemo. Labore qui consequatur perferendis inventore, distinctio asperiores quam dolore! Culpa rem a tenetur odit, quisquam atque incidunt voluptatem animi recusandae quam, saepe vero.</div>
<div>Ea nostrum, nesciunt odio ducimus impedit molestias magni delectus sequi numquam esse possimus aliquam culpa laboriosam, rem a iusto dicta fugit, ratione? Pariatur quos distinctio blanditiis, vero laudantium quidem, libero.</div>
<div>Est adipisci maiores et nulla. Laboriosam veniam, dolorum esse totam repellendus necessitatibus molestiae praesentium, consequuntur, accusamus aliquam officiis, accusantium. Sint sapiente esse qui veniam accusamus delectus deserunt libero odio necessitatibus!</div>
<div>Commodi blanditiis laudantium debitis sequi, sapiente porro deserunt eaque, explicabo mollitia nam maiores iusto hic quidem earum! Eligendi mollitia ipsum voluptas unde dolorem recusandae quos ab error deserunt consectetur. Eligendi.</div>
<div>Eius aspernatur voluptates, voluptatibus pariatur fugiat voluptate suscipit corporis rem dolore repellendus hic quaerat quisquam, accusamus animi minus, quae in sunt. Repudiandae ad sunt autem iusto, quisquam pariatur totam, libero.</div>
<div>Natus, nihil, assumenda. Consequuntur, cumque odit odio placeat perferendis tempore architecto cupiditate natus nesciunt modi officiis facilis dolores, mollitia fuga magni maxime ad reiciendis, debitis sit voluptate minus sapiente praesentium.</div>
<div>Voluptatibus esse magni cupiditate obcaecati porro. Ipsam est modi, veniam libero! Laboriosam iste dolore tenetur nobis sequi eligendi vel dolorem, illo soluta minus labore tempore est recusandae, repudiandae, delectus rerum!</div>
<div>Veritatis fugiat, quod hic architecto, laudantium inventore at similique recusandae tempora, rerum deserunt vero voluptas totam aliquam, a harum minus id animi aperiam. Pariatur magni doloribus praesentium inventore illum recusandae?</div>
<div>Vero, cum consequatur qui maiores sit veritatis non harum distinctio, nobis optio ad dicta nostrum placeat vitae similique voluptatem minima quia voluptate magni voluptas officia? Dolor sed quo assumenda debitis.</div>

Here i got the full working code.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var player;
var playerInfoList = ['player','player1'];
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = playerInfoList[i];
player = new YT.Player(curplayer, {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange' : onPlayerChange
}
});
}
}
function onPlayerReady(event) {
var curplayer = event.target.a;
var status = event.target;
jQuery(window).scroll(function() {
$offtop = jQuery(curplayer).offset().top;
$wofftop = jQuery(window).scrollTop();
$winnerheight = jQuery(window).innerHeight();
$calcHeight = $winnerheight - 200;
if (($wofftop > $offtop - $calcHeight) && ($wofftop < $offtop + 200) && !jQuery(curplayer).hasClass("paused")){
event.target.playVideo();
} else {
event.target.pauseVideo();
}
});
}
function onPlayerChange(event) {
var curplayer = event.target.a
if (document.activeElement.id === curplayer.id) {
if (event.data === 1) {
jQuery(curplayer).removeClass("paused");
} else if (event.data === 2) {
jQuery(curplayer).addClass("paused");
}
$(curplayer).blur();
}
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>