Issue or Inquiry
I am seeking a way to disable actual scrolling on an element while still utilizing a scrollbar for convenience (avoiding the need for manual JavaScript implementations instead of relying on browser functions).
If anyone has an improved solution or alternative approach, your assistance would be greatly appreciated.
Update 13-03-2017
I have identified a solution that appears to be effective (tested across IE11, Edge, Chrome, Firefox, Chrome for Android, and Firefox for Android).
Therefore, the remaining content of this query regarding the problem can be disregarded.
Update 12-03-2017
I found a method to toggle (prevent) scrolling in IE 11, Edge, Firefox, Chrome, and Firefox for Android. However, it seems to perform poorly (significant lag) specifically in Chrome for Android. Any insights into this issue?
This outlines my solution as of 12-03-2017, but Chrome for Android does not respond well to it (!). Assistance in refining this solution (or suggesting an alternate method) would be valuable.
- A single
divcontaining scrollable content withposition: fixed(#scrollsviascrolldistractin the provided code). - Another
divwith the same height as the scrollable contentdiv, positioned absolutely (or relatively based on preference). This corresponds to#scrolldistractin the embedded code snippet. - Utilize
window.requestAnimationFramewith a callback function adjusting themarginTopvalue of the scrollable contentdiv(#scrollsviascrolldistract) relative to the currentscrollTopwindow value (utilizing negative margin for this purpose). - To retain control and prevent scrolling, refrain from updating the
marginTopvalue, thereby maintaining the position of the scrollable contentdivunaffected by the scrollbar position.
The below code snippet has been tested on IE 11, Edge, Firefox, and Chrome (exhibiting satisfactory performance), while encountering issues specifically in Chrome for Android (unsatisfactory). Additionally, testing was conducted on Firefox for Android (resulting in favorable outcomes). This method outperforms using two div elements with position: fixed.
var scrollDisabled = false;
function toggleScroll() {
scrollDisabled = !scrollDisabled;
}
function doScroll() {
var st;
if (!scrollDisabled) {
$("#scrollsviascrolldistract").css("marginTop", -$(window).scrollTop());
}
window.requestAnimationFrame(doScroll);
}
window.requestAnimationFrame(doScroll);
$("#scrolltoggler").on('click', toggleScroll);body {
background-color: whitesmoke;
}
#scrollsviascrolldistract {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
}
#scrolldistract {
position: absolute;
left: 0;
top: 0;
height: 6000px;
}
.red,
.blue {
position: relative;
width: 100%;
height: 300px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scrolldistract">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="6000">
</div>
<div id="scrollsviascrolldistract">
<div class="red">BEGIN</div>
<div class="blue"><button id="scrolltoggler">Toggle Scroll On/Off</button></div>... Prior Solution (please disregard 12-03-2017; refer to updated solution)
My previous strategy involved enabling scrolling within an invisible element, supplemented by a spacer image to achieve the desired height.
However, various cross-browser discrepancies emerged.
Prior Solution - Successful Aspects and Limitations
Chrome
- Mouse and scrollbar scrolling functionality are operational.
- Keyboard-based scrolling via focus() immediate success.
Chrome for Android
- Touch-based scrolling functionalities as intended.
Firefox
- Ctrl+PageUp/Ctrl+PageDown causing tab switch disables scrolling until interacting with scrollbar.
- Key-based scrolling functional, yet requires clicking in background for focus.
Firefox for Android
- Significant complications arise, ceasing scrolling abruptly after short periods without clear cause.
Edge
- Functional besides the limitation on focus(). Require additional clicks in document area (red/blue blocks or background) for operation.
Internet Explorer 11
- Exclusively supports mouse-based scrolling. Inability to attain focus manually hinders keyboard-driven scrolling.
Code and Resources
Demo available at: https://jsfiddle.net/hn63z0jt/
HTML5 markup sample with correct DOCTYPE:
<div id="scrollsviascrolldistract">
<div class="red">BEGIN</div>
<div class="blue"> </div>... CSS styling:
body {
background-color: whitesmoke;
}
#scrollsviascrolldistract {
position: fixed;
left: 0px;
top: 0px;
}
#scrolldistract {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
background: rgba(0,0,0,0);
z-index: 999;
}
.red, .blue {
position: relative;
width: 900px;
height: 300px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
JavaScript implementation (incorporating jQuery):
$(function() {
var $window = $(window);
var $scrollsviascrolldistract = $('#scrollsviascrolldistract');
var $scrolldistract = $('#scrolldistract');
$scrolldistract.focus();
$scrolldistract.on('scroll', function() {
var scrollTop = $scrolldistract.scrollTop();
$scrollsviascrolldistract.css('marginTop', -scrollTop);
});
});