क्षैतिज स्क्रॉल करते समय किसी ब्राउज़र को इतिहास में वापस/आगे जाने से कैसे रोकें?

Question

क्षैतिज स्क्रॉल करते समय पीछे या आगे जाने के लिए JQuery या मूल JS का उपयोग करके एक आधुनिक ब्राउज़र डिफ़ॉल्ट कार्यक्षमता को कैसे अक्षम कर सकता है?

आमतौर पर यह ट्रैकपैड का उपयोग करते समय होता है और जब स्क्रॉल करने योग्य div के अंत तक स्क्रॉल किया जाता है।

Answer 1

इसलिए मुझे लगा कि मैंने एक वेब ऐप बनाया है, इसलिए उपयोगकर्ता को किसी भी सहेजे गए परिवर्तनों के लिए संकेत क्यों न दें जो उपयोगकर्ता को किसी भी सहेजे गए परिवर्तन को खोने या ब्राउज़र इतिहास में पिछले या अगले पृष्ठ पर समाप्त होने से रोक देगा।

window.onbeforeunload = function(e) { 
    return 'Ask user a page leaving question here'; 
}; 

Answer 2

history.pushState(null, null, location.href); 
window.onpopstate = function(event) { 
    history.go(1); 
}; 

डेमो: http://jsfiddle.net/DerekL/RgDBQ/show/

आप पिछले वेबपेज के लिए वापस जाना, जब तक आप वापस बटन स्पैम या वापस बटन दबाए रखें और पिछली प्रविष्टि का चयन नहीं कर सकेंगे।

_{नोट: onpopstate (या घटना onbeforeunload) आईओएस पर काम नहीं कर रहा है।}

Answer 3

यदि आप मैक पर हैं तो यह ट्रैक पैड जेस्चर के कारण होता है।

System Preferences -> Trackpad -> More Gestures. 

नहीं जे एस समाधान आप देख रहे हैं, लेकिन अगर आप बस इसे खुद के लिए रोकना चाहते हैं, आप सुविधा को बंद कर सकते हैं।

Answer 4

क्रोम और सफारी में काम करता है (यानी क्रोम और सफारी के साथ परीक्षण):

// el === element on which horizontal scrolling is done 
// (can be container of scrolled element or body or any other ancestor) 
var preventHistoryBack = function (e) { 
    var delta = e.deltaX || e.wheelDeltaX; 

    if (! delta) { 
    return; 
    } 

    window.WebKitMediaKeyError /*detect safari*/ && (delta *= -1); 

    if (((el.scrollLeft + el.offsetWidth) === el.scrollWidth && delta > 0) || (el.scrollLeft === 0 && delta < 0)) { 
    e.preventDefault(); 
    } 
}; 
el.addEventListener('mousewheel', preventHistoryBack);