jquery

Question

के बिना छोटे div के अंदर ओवरफ्लोवन div के दृश्य भाग को स्क्रॉल करें, मैं वर्तमान में एक छोटे बी को क्षैतिज रूप से एक छोटे <div> ए के अंदर दो बटनों का उपयोग करके स्थानांतरित करने की कोशिश कर रहा हूं।
मुझे jquery का उपयोग करके एक ही समस्या मिली, लेकिन कोड में इस अनुभाग के लिए लाइब्रेरी का उपयोग नहीं करना चाहता।

यहाँ fiddle

मैं jQuery का उपयोग किए बिना लेकिन शुद्ध जावास्क्रिप्ट, HTML और साथ किसी भी दिशा में क्षेत्र 100px स्थानांतरित करने के लिए एक 'छोड़' और 'सही' बटन का प्रयोग देखने के दृश्य क्षेत्र स्क्रॉल करने के लिए करना चाहते हैं सीएसएस।

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:750px;"> 
 
    <div style="background-color:orange;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:red;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:blue;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button>left</button> 
 
<button>right</button>

Answer 1

var outerDiv = document.getElementById('outer-div'); 
 

 
function moveLeft() { 
 
    outerDiv.scrollLeft -= 100; 
 
} 
 

 
function moveRight() { 
 
    outerDiv.scrollLeft += 100; 
 
} 
 

 
var leftButton = document.getElementById('left-button'); 
 
var rightButton = document.getElementById('right-button'); 
 

 
leftButton.addEventListener('click', moveLeft, false); 
 
rightButton.addEventListener('click', moveRight, false);

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:750px;"> 
 
    <div style="background-color:orange;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:red;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:blue;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button id="left-button">left</button> 
 
<button id="right-button">right</button>

Answer 2

var div = document.getElementById("outer-div"); 
 
var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 

 
left.onclick = function() { 
 
    if (div.scrollLeft < 200) 
 
    div.scrollBy(100, 0); 
 
} 
 

 
right.onclick = function() { 
 
    div.scrollBy(-100, 0); 
 
}

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:750px;"> 
 
    <div style="background-color:orange;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:red;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div style="background-color:blue;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button id="left">left</button> 
 
<button id="right">right</button>

इस बाहर की जाँच करें।

Answer 3

जिससे अब वह jQuery की जरूरत है अपने टुकड़ा अपडेट किया गया, और कहा बटन

document.getElementById("outer-div").onmousemove = function() { 
 
    document.getElementById("outer-div").scrollTo(event.clientX, 0); 
 
} 
 
document.getElementById("move-left").onclick = function() { 
 
    document.getElementById("outer-div").scrollBy(100, 0); 
 
} 
 
document.getElementById("move-right").onclick = function() { 
 
    document.getElementById("outer-div").scrollBy(-100, 0); 
 
}

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:500px;"> 
 
    <div style="background-color:orange;width:250px;height:250px;float:left;"> 
 
    </div> 
 
    <div style="background-color:red;width:250px;height:250px;float:left;"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button id="move-left">Move Left</button> 
 

 
<button id="move-right">Move Left</button>

Answer 4

खैर बहुत आसान है कि अगर आप लिखने योग्य scrollLeft संपत्ति को संशोधित:

document.getElementById('to-right').onclick = function() { 
 
    document.getElementById('outer-div').scrollLeft += 100; 
 
} 
 

 
document.getElementById('to-left').onclick = function() { 
 
    document.getElementById('outer-div').scrollLeft -= 100; 
 
}

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:750px;"> 
 
    <div style="background-color:orange;width:250px;height:100px;float:left;"></div> 
 
    <div style="background-color:red;width:250px;height:100px;float:left;"></div> 
 
    <div style="background-color:blue;width:250px;height:100px;float:left;"></div> 
 
    </div> 
 
</div> 
 
<button id="to-left">left</button> 
 
<button id="to-right">right</button>

Answer 5

इस सीएसएस दृष्टिकोण पर एक नजर डालें।

अद्यतन: जोड़ा गया एनीमेशन।

var value = 0; 
 
move = function(direction) 
 
{ 
 
value += ((direction > 0 && value >= 0)||(direction < 0 && value <= -500)) ? 0 : (direction * 100); 
 
document.documentElement.style.setProperty('--movex', value + 'px'); 
 
}

:root { 
 
    --movex: 0; 
 
} 
 

 
.moved { 
 
    transform: translateX(var(--movex)) 
 
} 
 

 
div{ 
 
    transition: transform 1000ms ease-in-out; 
 
}

<div id="outer-div" style="width:250px;overflow:hidden;"> 
 
    <div style="width:750px;"> 
 
    <div class="moved" style="background-color:orange;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div class="moved" style="background-color:red;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    <div class="moved" style="background-color:blue;width:250px;height:100px;float:left;"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button onclick = "move(-1)">left</button> 
 
<button onclick = "move(1)">right</button>