एक ही दिशा में स्क्रॉलिंग: क्षैतिज या लंबवत

मैं हमेशा एक हेडर और पंक्ति को बनाए रखने के दौरान एक HTML तालिका दृश्य के अंदर क्षैतिज या लंबवत स्क्रॉल करने का एक तरीका ढूंढ रहा हूं जो हमेशा दिखाई देता है। अधिमानतः मैं कुछ इस के समान कुछ चाहता हूं लेकिन एम्बर या कॉफ़ीस्क्रिप्ट के बिना शुद्ध जावास्क्रिप्ट में। मैं एम्बर-टेबल का उपयोग नहीं करना पसंद करता क्योंकि मेरी बाकी परियोजना एम्बर पर आधारित नहीं है और मैं इससे अपरिचित हूं।

इसलिए मैंने कुछ समान यहां शुरू किया। इसे हेडर पंक्ति और कॉलम रखने का लाभ है, लेकिन यह क्षैतिज दिशा के साथ-साथ ऊर्ध्वाधर दिशा दोनों में स्क्रॉल करता है। इस उदाहरण और पहले के बीच का अंतर यह है कि ऐडपर टेबल केवल एक दिशा में स्क्रॉल करता है। जो एक अधिक शांत उपयोगकर्ता अनुभव है।

मैं जहां चाहूं पाने के संभावित तरीकों की तलाश में हूं। ऐसा लगता है कि पहला भाग यह जांचने के लिए होता है कि उपयोगकर्ता किस दिशा में स्क्रॉल कर रहा है। ऐसी चीज jQuery के साथ किया जा सकता है;

var previousScrollvertical = 0,
    previousScrollHorizontal = 0;

$(window).scroll(function(){

   var currentVerticalScroll = $(this).scrollTop(),
       currentHorizontalScroll = $(this).scrollLeft();

   if(currentVerticalScroll==previousScrollvertical) {
           if (currentHorizontalScroll > previousScrollHorizontal){
               console.log('Right');
           } else {
              console.log('left');
           }
   } else if(currentHorizontalScroll==previousScrollHorizontal) {
           if (currentVerticalScroll > previousScrollvertical){
               console.log('down');
           } else {
              console.log('up');
           }
   }

   previousScrollHorizontal = currentHorizontalScroll;
   previousScrollvertical =currentVerticalScroll;
});

कोड का यह स्निपेट किसी भी वेबसाइट पर काम करता है जिसमें jQuery लोड होता है। आप इसे कंसोल से बाहर आज़मा सकते हैं।

लेकिन यहां से मुझे अटक गया लगता है। क्या jQuery के साथ स्क्रॉल दिशा को अवरुद्ध करना संभव है? क्या इसे हासिल करने का कोई आसान तरीका है? क्या मुझे एक पूरी तरह से अलग मार्ग पर विचार करना चाहिए?

0
स्पष्टीकरण के लिए: क्या आप jQuery के साथ शुद्ध जावास्क्रिप्ट या जावास्क्रिप्ट चाहते हैं? और आप ऊपर और नीचे जाने पर दूसरी दिशा को रोकने के लिए सीएसएस के <कोड> ओवरफ्लो-एक्स: छुपा का उपयोग कर सकते हैं, फिर स्क्रॉलिंग बंद होने के बाद इसे फिर से अनुमति दें। क्षैतिज स्क्रॉलिंग के लिए वही
जोड़ा लेखक Zach Saucier, स्रोत

1 उत्तर

संक्षिप्त उत्तर उस दिशा की स्क्रॉल सेट करने के लिए jQuery के scrollTop या scrollLeft का उपयोग करना है, जिसे आप पहले से पहले ब्लॉक करना चाहते हैं।

मैंने एक त्वरित उदाहरण बनाया है जो दिखाता है कि कोई अभ्यास में ऐसा कैसे कर सकता है:

लाइव डेमो

var $container = $('.table-container');
var $table = $container.find('table');

var previousScroll = [0, 0];
var correction = false;

// Adjust the threshold to a larger number if you'd like it
// to take longer to switch between horizontal and vertical
// scrolling
var threshold = 10;
var direction;
var directionTimeout;

$container.on('scroll', function (event) {
    if (!correction) {
        var element = event.currentTarget,
            $element = $(event.currentTarget),
            x = element.scrollLeft,
            y = element.scrollTop;

        var diff = [
            Math.abs(x - previousScroll[0]),
            Math.abs(y - previousScroll[1])
        ];

        correction = true;

        if (!direction) {
            if (diff[0] > diff[1]) {
                direction = 'horizontal';
            } else if (diff[0] < diff[1]) {
                direction = 'vertical';
            } else {
                direction = 'vertical';
            }
        }

        if (direction === 'horizontal') {
            $element.scrollTop(previousScroll[1]);
            previousScroll = [x, previousScroll[1]];
        } else {
            $element.scrollLeft(previousScroll[0]);
            previousScroll = [previousScroll[0], y];
        }

        clearTimeout(directionTimeout);
        directionTimeout = setTimeout(function() {
            direction = null;
        }, threshold);
    } else {
        correction = false;
    }
});
0
जोड़ा