วิธีปิดใช้งานการเลื่อนหน้าด้วยโปรแกรมโดย jQuery

163

ใช้ jQuery ฉันต้องการปิดการเลื่อนร่างกาย:

ความคิดของฉันคือ:

ชุด body{ overflow: hidden;}
จับภาพปัจจุบัน scrollTop();/scrollLeft()
เชื่อมโยงกับเหตุการณ์การเลื่อนร่างกายตั้ง scrollTop / scrollLeft เป็นค่าที่บันทึกไว้

มีวิธีที่ดีกว่า?

ปรับปรุง:

โปรดดูตัวอย่างของฉันและเหตุผลที่http://jsbin.com/ikuma4/2/edit

ฉันรู้ว่ามีใครบางคนกำลังคิดว่า "ทำไมเขาไม่ใช้เพียงแค่position: fixedบนแผงควบคุม"

โปรดอย่าแนะนำสิ่งนี้เพราะฉันมีเหตุผลอื่น

jquery css scroll

— Hailwood
แหล่งที่มา

7

"มีวิธีที่ดีกว่า?" - นอกเหนือจากการปล่อยให้เบราว์เซอร์ทำงานปกติหรือไม่

— เฟนตัน

22

"melodramatically"?

— Mike Weller

6

บางทีอาจมีความหมายโดยทางโปรแกรม เนื่องจากเป็นคำแนะนำการแก้ไขการสะกดคำยอดนิยมของ firefox สำหรับ 'โดยทางโปรแกรม'

— Michael Shimmins

4

เธรดนี้จะเป็น \ b \

— Cipi

3

@Sohnee ปิดการใช้งานการเลื่อน! == ไม่ดี

— Mansiemans

136

วิธีเดียวที่ฉันพบว่าทำเช่นนี้คล้ายกับสิ่งที่คุณอธิบาย:

คว้าตำแหน่งการเลื่อนปัจจุบัน (อย่าลืมแกนนอน!)
ตั้งค่าโอเวอร์โฟลว์เป็นซ่อน (อาจต้องการเก็บค่าโอเวอร์โฟลว์ก่อนหน้า)
เลื่อนเอกสารไปยังตำแหน่งเลื่อนที่เก็บไว้ด้วย scrollTo ()

จากนั้นเมื่อคุณพร้อมที่จะอนุญาตให้เลื่อนอีกครั้งให้ยกเลิกสิ่งนั้นทั้งหมด

แก้ไข: ไม่มีเหตุผลที่ฉันไม่สามารถให้รหัสได้เนื่องจากฉันประสบปัญหาในการขุดมันขึ้นมา ...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])

— TFE
แหล่งที่มา

2

โปรดดูjsbin.com/ikuma4/2/editและอธิบายเหตุผลใด ๆ กับฉันว่าของคุณดีกว่าไหม ฉันทำบางสิ่งบางอย่างหายไป (ฉันถามเพราะฉันไม่เห็นเหตุผลใด ๆ สำหรับความยาวของคำตอบของคุณเมื่อเทียบกับตัวอย่างของฉัน)

— Hailwood

3

วิธีการของคุณไม่ทำงานใน IE7 ฉันลองมันก่อนเช่นกัน ปัญหาคือมันไม่ตอบสนองต่อเหตุการณ์เลื่อนเร็วพอ ช่วยให้การเลื่อนเอกสารจากนั้นเลื่อนกลับคืนเมื่อ JS ของคุณรีเซ็ตตำแหน่งการเลื่อนกลับในตำแหน่งที่คุณต้องการ

— TFE

1

นอกจากนี้หากร่างกายมีสิ่งอื่นมากเกินกว่าautoจะถูกเขียนทับ ฉันต้องการรักษาการตั้งค่าเดิมไว้เพื่อเพิ่มค่าใช้จ่ายด้วย

— TFE

ไม่มีใครรู้ว่าทำไมเพียงแค่จัดแต่งทรงผมhtmlและbodyมีoverflow: hiddenไม่เพียงพอ? เรายังคงต้องการผู้จัดการเหตุการณ์

— kpozin

4

นี่คือคำตอบที่ยอดเยี่ยม และเพื่อให้ทำงานบนอุปกรณ์สัมผัส, ตรวจสอบนี้คำตอบ

— แพทริค

235

นี่จะปิดการใช้งานการเลื่อนอย่างสมบูรณ์ :

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

ในการกู้คืน:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

ทดสอบบน Firefox และ Chrome

— gitaarik
แหล่งที่มา

18

ทำงานตามที่คาดไว้ ขอบคุณ! นี่ควรเป็นคำตอบที่ยอมรับได้!

— Dave Chen

6

ยังคงเลื่อนด้วยปุ่มกลางของเมาส์บนโครเมี่ยม

— Lothar

16

สิ่งนี้จะสูญเสียตำแหน่งการเลื่อนปัจจุบัน OP กล่าวอย่างชัดเจนเกี่ยวกับการจับตำแหน่งการเลื่อนดังนั้นฉันคิดว่าเขาต้องการสิ่งนั้น ยังไงก็ตามผมต้องดังนั้นนี่คือการใช้งานที่ จำกัด ให้ฉัน

— zerm

7

PS การยกเลิกการheight: 100%ล็อกการเลื่อนอย่างมีประสิทธิภาพ ณ ตำแหน่งปัจจุบันโดยไม่ต้องกระโดด - บน Chrome ล่าสุดอย่างน้อยที่สุด

— Zerm

2

นี่ไม่ใช่คำตอบที่ถูกต้อง ไม่มีการเลื่อนตำแหน่งเลื่อน

— เทย์เลอร์เครสซี่

43

ลองนี้

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

— cubbiu
แหล่งที่มา

สิ่งที่ฉันกำลังมองหา ... เกือบ ยังไงให้ปิดการใช้งานในระหว่างปุ่มลูกศร?

— Cody

2

@Cody - รวมสิ่งนี้กับ css overflow: hidden

— Darius.V

2

@cubbiu วิธีการย้อนกลับได้หรือไม่

— Meer

3

คุณสามารถใช้$('#element').off('scroll touchmove mousewheel');

— arnuschky

1

ทางออกที่ดี แม้ว่าคุณจะปิดการใช้งานการbodyเลื่อนเท่านั้นแต่ยังอนุญาตให้เลื่อนภายในองค์ประกอบลูกอื่น ๆ ที่มีoverflow: scroll?

— Fizzix

27

ฉันเพียงแค่ให้การปรับแต่งเล็ก ๆ น้อย ๆ เพื่อแก้ปัญหาโดยTFE โดยเฉพาะอย่างยิ่งฉันได้เพิ่มการควบคุมเพิ่มเติมบางอย่างเพื่อให้แน่ใจว่าไม่มีการเปลี่ยนแปลงของเนื้อหาของหน้า (aka การเปลี่ยนหน้า ) เมื่อตั้งค่าแถบเลื่อนเป็นhiddenเมื่อเลื่อนมีการตั้งค่า

สองฟังก์ชั่น Javascript lockScroll()และunlockScroll()สามารถกำหนดตามลำดับเพื่อล็อคและปลดล็อคการเลื่อนหน้า

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

ที่ฉันคิดว่า<body>ไม่มีระยะเริ่มต้น

position:fixedแจ้งให้ทราบว่าในขณะที่การแก้ปัญหาดังกล่าวข้างต้นการทำงานในส่วนของกรณีการปฏิบัติมันไม่ได้เป็นที่ชัดเจนตั้งแต่มันต้องปรับแต่งเพิ่มเติมบางอย่างสำหรับหน้าเว็บที่มีตัวอย่างเช่นส่วนหัวกับ ลองเป็นกรณีพิเศษพร้อมตัวอย่าง สมมติว่ามี

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

กับ

#header{position:fixed; padding:0; margin:0; width:100%}

จากนั้นควรเพิ่มสิ่งต่อไปนี้ในฟังก์ชั่นlockScroll()และunlockScroll():

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

ในที่สุดดูแลค่าเริ่มต้นที่เป็นไปได้สำหรับระยะขอบหรือแผ่นรอง

— JeanValjean
แหล่งที่มา

4

คุณมีข้อผิดพลาดใน javascript $ body.css ({'margin-right': 0, 'margin-bottom', 0}); ควรเป็น $ body.css ({'margin-right': 0, 'margin-bottom': 0});

— Johansrk

อันที่จริงเพียงแค่ใช้marginRightและmarginLeft:)

— Martijn

25

คุณสามารถใช้รหัสนี้:

$("body").css("overflow", "hidden");

— mr.soroush
แหล่งที่มา

8

คุณยังสามารถใช้ปุ่มกลางของเมาส์เพื่อเลื่อน

— Roger Far

2

ไม่นี่โอเคและไม่มีการเลื่อนด้วย!

— mr.soroush

หากคุณใช้ css พิเศษคุณสามารถปิดการเลื่อนได้อย่างสมบูรณ์ดูคำตอบของฉันสำหรับรายละเอียดเพิ่มเติม

— gitaarik

21

หากต้องการปิดการเลื่อนให้ลองทำดังนี้:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

เพื่อรีเซ็ต:

$(window).off('scroll');

— Patrick DaVader
แหล่งที่มา

นี่เป็นทางออกที่ยอดเยี่ยมสำหรับสิ่งที่ฉันต้องการ

— Terry Carter

@ EveryScreamer ไม่มันทำให้หน้าจอสั่นอย่างบ้าคลั่ง พยายามหาวิธีแก้ปัญหา

— Telarian

5

ฉันเขียนปลั๊กอิน jQuery เพื่อจัดการสิ่งนี้: $ .disablescroll $

มันช่วยป้องกันการเลื่อนจากเหตุการณ์ล้อเลื่อนทัชมูฟและปุ่มกดเช่น Page Downเช่น

มีตัวอย่างที่นี่สาธิตที่นี่

การใช้งาน:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");

— Josh Harrison
แหล่งที่มา

ฉันพยายามใช้ปลั๊กอิน disablescroll () ของคุณเพื่อปิดการใช้งานการเลื่อนเมื่อได้ยินเหตุการณ์ mouswheel / scroll แต่ไม่ได้ผล โอกาสใด ๆ ที่คุณรู้วิธีที่จะบรรลุผลนั้น?

— สีเหลืองนักบุญ

@JB ฉันอาจช่วยได้ แต่ความคิดเห็นไม่ใช่สถานที่ที่ดีที่สุด เข้าร่วมกับฉันในการแชทล้นล้นและฉันจะเห็นสิ่งที่ฉันสามารถทำได้: chat.stackoverflow.com/rooms/55043/disablescroll-usage

— Josh Harrison

ฉันขอโทษ แต่ปลั๊กอินนี้ใช้ไม่ได้กับ jsfiddle ของคุณ

— markj

คุณสามารถช่วยฉันตรวจสอบสิ่งนี้ได้โดยบอกฉันว่าเบราว์เซอร์ / แพลตฟอร์มใดที่ใช้งานไม่ได้

— Josh Harrison

5

คุณสามารถแนบฟังก์ชั่นเพื่อเลื่อนเหตุการณ์และป้องกันพฤติกรรมเริ่มต้นของมัน

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

— dzimi
แหล่งที่มา

1

นี่คือคำตอบที่ถูกต้อง ไม่ทราบว่าทำไมมันไม่ตั้งค่าเป็นมัน

— Guilherme Ferreira

มันได้ผล. เพียงแค่ต้องการรหัสรีเซ็ตที่โพสต์เพื่อให้ตรงกับคำตอบของแพทริค

— Hastig Zusammenstellen

4

หนึ่งซับเพื่อปิดการเลื่อนรวมถึงปุ่มกลางของเมาส์

$(document).scroll(function () { $(document).scrollTop(0); });

แก้ไข : ไม่จำเป็นต้องมี jQuery อยู่ด้านล่างเหมือนข้างบนในวานิลลา JS (นั่นหมายความว่าไม่มีเฟรมเวิร์กเพียงใช้ JavaScript):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop - มาตรฐาน

this.body.scrollTop - ความเข้ากันได้ของ IE

— Pawel
แหล่งที่มา

4

หากต้องการซ่อน Scroll: $("body").css("overflow", "hidden");
วิธีคืนค่า Scroll: $("body").css("overflow", "initial");

— Joan Alberto Aguilar Peña
แหล่งที่มา

3

คุณตั้งความสูงของร่างกายเป็น 100% แล้วซ่อนเร้นไม่ได้ใช่ไหม ดูhttp://jsbin.com/ikuma4/13/edit

— Adrian Schmidt
แหล่งที่มา

$ ("html"). css ({height: '100%', overflow: 'hidden'}); มันใช้งานได้ดีขอบคุณเอเดรีย

— อเล็กซ์

3

บางคนโพสต์รหัสนี้ซึ่งมีปัญหาในการไม่รักษาตำแหน่งการเลื่อนเมื่อคืนค่า เหตุผลก็คือผู้คนมักจะนำไปใช้กับ html และ body หรือเพียงแค่ body แต่ควรใช้กับ html เท่านั้น วิธีนี้เมื่อกู้คืนตำแหน่งการเลื่อนจะถูกเก็บไว้:

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

ในการกู้คืน:

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});

— Mescalina
แหล่งที่มา

ไม่'overflow': 'auto',ใช้'overflow': 'initial',

— evtuhovdo

2

สิ่งนี้อาจหรืออาจใช้ไม่ได้กับวัตถุประสงค์ของคุณ แต่คุณสามารถขยายjScrollPaneเพื่อให้ฟังก์ชันการทำงานอื่น ๆ ทำงานได้ก่อนที่จะทำการเลื่อน ฉันเพิ่งทดสอบเพียงเล็กน้อยนี้ แต่ฉันสามารถยืนยันได้ว่าคุณสามารถกระโดดและป้องกันการเลื่อนทั้งหมด ทั้งหมดที่ฉันทำคือ:

ดาวน์โหลด zip สาธิต: http://github.com/vitch/jScrollPane/archives/master
เปิดการสาธิต "กิจกรรม" (events.html)
แก้ไขเพื่อใช้แหล่งสคริปต์ที่ไม่ย่อเล็กสุด: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
ภายใน jquery.jscrollpane.js ให้แทรก "return;" ที่บรรทัด 666 (หมายเลขที่เป็นมงคล! แต่ในกรณีที่รุ่นของคุณแตกต่างกันเล็กน้อยนี่คือบรรทัดแรกของpositionDragY(destY, animate)ฟังก์ชั่น

ไฟเหตุการณ์ events.html และคุณจะเห็นกล่องเลื่อนตามปกติซึ่งเนื่องจากการแทรกแซงการเข้ารหัสของคุณจะไม่เลื่อน

คุณสามารถควบคุมแถบเลื่อนของเบราว์เซอร์ทั้งหมดได้ด้วยวิธีนี้ (ดู fullpage_scroll.html)

ดังนั้นน่าจะเป็นขั้นตอนต่อไปคือการเพิ่มการเรียกไปยังฟังก์ชั่นอื่น ๆ ที่จะดับลงและทำเวทมนต์ยึดของคุณจากนั้นตัดสินใจว่าจะเลื่อนต่อหรือไม่ คุณยังได้รับการเรียก API เพื่อตั้ง scrollTop และ scrollLeft

หากคุณต้องการความช่วยเหลือเพิ่มเติมโพสต์ที่คุณจะไปถึง!

หวังว่าสิ่งนี้จะช่วยได้

— Jeremy Warne
แหล่งที่มา

2

ฉันใส่คำตอบที่อาจช่วยได้ที่นี่: jQuery simplemodal ปิดการใช้งานการเลื่อน

มันแสดงวิธีปิดแถบเลื่อนโดยไม่เลื่อนข้อความไปมา คุณสามารถละเว้นส่วนต่าง ๆ เกี่ยวกับโมดุลแบบง่าย ๆ

— mhenry1384
แหล่งที่มา

1

หากคุณต้องการปิดการใช้งานการเลื่อนด้วยการนำทางด้วยแป้นพิมพ์คุณสามารถแทนที่เหตุการณ์ keydown

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

— sean
แหล่งที่มา

1

ลองรหัสนี้:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

— Jopie
แหล่งที่มา

0

คุณสามารถปกปิดหน้าต่างด้วย div ที่เลื่อนได้เพื่อป้องกันการเลื่อนเนื้อหาในหน้า และด้วยการซ่อนและแสดงคุณสามารถล็อค / ปลดล็อคการเลื่อนของคุณ

ทำสิ่งนี้:

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

— Appex
แหล่งที่มา

7

โปรดอย่าใช้ตัวย่อเช่น "u" และ "smth" ใช้เวลาในการสะกดอย่างถูกต้องเพื่อให้สามารถอ่านได้

— Tin Man

0

สำหรับผู้ที่มีเลย์เอาต์ที่เป็นศูนย์กลาง (ผ่านmargin:0 auto;) ต่อไปนี้เป็นposition:fixedวิธีแก้ไขปัญหารวมถึงโซลูชันที่เสนอโดย@tfe

ใช้โซลูชันนี้หากคุณประสบปัญหาการจัดหน้า (เนื่องจากแถบเลื่อนแสดง / ซ่อน)

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

... รวมกับ ...

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

... และในที่สุด CSS สำหรับ.modal-noscroll...

.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

ฉันจะกล้าที่จะพูดแบบนี้มีมากขึ้นของการแก้ไขที่เหมาะสมกว่าใด ๆ ของการแก้ปัญหาอื่น ๆ ออกมี แต่ฉันไม่ได้ทดสอบมันที่ยังไม่ทั่วถึง ... : P

แก้ไข: โปรดทราบว่าฉันไม่มีเงื่อนงำว่ามันจะทำงานได้อย่างไร (อ่าน: ระเบิด) บนอุปกรณ์ระบบสัมผัส

— Matthemattics
แหล่งที่มา

0

คุณสามารถใช้ DOM เพื่อทำเช่นนั้นได้ สมมติว่าคุณมีฟังก์ชั่นที่คุณเรียกเช่นนี้:

function disable_scroll() {
document.body.style.overflow="hidden";
}

และนั่นคือทั้งหมดที่มีให้มัน! หวังว่านี่จะช่วยได้นอกเหนือจากคำตอบอื่น ๆ ทั้งหมด!

— เบรนแดน
แหล่งที่มา

0

นี่คือสิ่งที่ฉันทำ:

CoffeeScript:

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

javascript:

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});

— Marz
แหล่งที่มา

0

ไม่แน่ใจว่ามีใครลองแก้ปัญหาของฉันไหม อันนี้ใช้ได้กับทั้งเนื้อความ / html แต่ไม่ต้องสงสัยเลยว่ามันสามารถนำไปใช้กับองค์ประกอบใด ๆ ที่ทำให้เกิดเหตุการณ์การเลื่อน

เพียงแค่ตั้งค่าและยกเลิกการตั้งค่า scrollLock ตามที่คุณต้องการ

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

นี่คือตัวอย่างJSFiddle

หวังว่าคนนี้จะช่วยใครซักคน

— FossilMFC
แหล่งที่มา

อันนี้ใช้งานได้ตามที่ควรยกเว้นหนึ่งข้อ เมื่อเลื่อนถูกล็อคและฉันเลื่อน kinda มันกระตุกเล็ก ๆ น้อย ๆ ก่อนที่จริงล็อคเลื่อน ...

— โทมัส Teilmann

0

ฉันคิดว่าทางออกที่ดีที่สุดและสะอาดคือ:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

และด้วย jQuery:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

ผู้ฟังเหตุการณ์เหล่านั้นควรบล็อคการเลื่อน เพียงลบออกเพื่อเปิดใช้งานการเลื่อนอีกครั้ง

— Tiziano
แหล่งที่มา