Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में इंटरवल के साथ स्क्रॉल व्यू कैसे सेट करें?

उदाहरण

scrollTop, scrollHeight और setInterval से ऑटो-स्क्रोलिंग कंटेनर बनाएं।

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
<style> 
    #scrollDemo { height: 300px; overflow-y: scroll; } 
    #scrollDataFeatures { height: 500px; background-color: skyblue; } 
</style> 
</head> 
<body> 
<div id="scrollDemo"> 
    <div id="scrollDataFeatures"></div> 
    <h3>See the below Message and Scroll UP</h3> 
</div> 
<script> 
    var scrollData = document.getElementById("scrollDemo"); 
    scrollData.scrollTop = scrollData.scrollHeight; 
    setInterval(() => { 
        var heading3Data = document.createElement("h3"); 
        heading3Data.innerHTML = "Scroll Down...Please Scroll UP"; 
        scrollData.appendChild(heading3Data); 
        scrollData.scrollTop = scrollData.scrollHeight; 
    }, 30 * 1000); 
</script> 
</body> 
</html>

फ़ाइल सेव करें और Live Server से खोलें।

आउटपुट

हर 30 सेकंड में नया मैसेज जुड़ेगा और ऑटोमेटिकली नीचे स्क्रॉल होगा।

  1. JavaScript के साथ innerHTML सेट करें JavaScript के साथ innerHTML सेट करें

    innerHTML सेट करने का सही सिंटैक्स निम्नानुसार है - document.getElementById(yourIdName).innerHTML=yourValue; आइए अब देखें कि innerHTML कैसे सेट करें - उदाहरण <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-widt

  1. - JavaScript में PIN सत्यापन सेट करना

    आप लंबाई के आधार पर और पिन का प्रकार स्ट्रिंग होना चाहिए आदि के आधार पर पिन सत्यापित कर सकते हैं।उदाहरणकोड निम्न है:function simpleValidationForPin(pinValues) {    if (!(typeof pinValues === string && !~pinValues.indexOf(.) && !isNaN(Number(pinValues)) && (pinValues

  1. JavaScript के साथ CSS वेरिएबल्स को प्राप्त करना और सेट करना JavaScript के साथ CSS वेरिएबल्स को प्राप्त करना और सेट करना

    getComputedStyle() मेथड एक ऑब्जेक्ट देता है जिसमें टारगेट एलिमेंट पर लागू सभी स्टाइल शामिल होते हैं। getPropertyValue() मेथड का उपयोग कंप्यूटेड स्टाइल से वांछित प्रॉपर्टी प्राप्त करने के लिए किया जाता है। setProperty() का उपयोग CSS वेरिएबल का मान बदलने के लिए किया जाता है।उदाहरणनिम्नलिखित उदाहरण दर्