英文:
Horizontal mouse-scrolling not working in Firefox
问题
Horizontal mouse-scrolling not working in Firefox browsers.
This code works in Chrome, I mean you can use the mouse wheel to scroll the page horizontally.
But in Firefox, the mouse wheel is not scrolling with the mouse.
HTML+JS
<section class="card" id="horizontal-scroller">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</section>
<script>
document.getElementById("horizontal-scroller")
.addEventListener('wheel', function(event) {
if (event.deltaMode == event.DOM_DELTA_PIXEL) {
var modifier = '1';
// it's for Firefox, but don't work
} else if (event.deltaMode == event.DOM_DELTA_LINE) {
var modifier = parseInt(getComputedStyle(this).lineHeight);
} else if (event.deltaMode == event.DOM_DELTA_PAGE) {
var modifier = this.clientHeight;
}
if (event.deltaY != 0) {
// change vertical scrolling to horizontal
this.scrollLeft += modifier * event.deltaY;
event.preventDefault();
}
});
</script>
style.css
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
display: flex;
overflow-x: auto;
}
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
.card::-webkit-scrollbar {
display: none;
}
---------------------------------------------------Thanks in advance-------------------------------------------------------------------------------------------------------------------
英文:
Horizontal mouse-scrolling not working in Firefox browsers.
This code work in Chrome, I mean You can use the mouse wheel to scroll the page horizontally.
But in Firefox mouse wheel not scrolling with mouse.
HTML+JS
<section class="card" id="horizontal-scroller">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</section>
<script>
document.getElementById("horizontal-scroller")
.addEventListener('wheel', function(event) {
if (event.deltaMode == event.DOM_DELTA_PIXEL) {
var modifier = '1';
// it's for Firefox, but don't work
} else if (event.deltaMode == event.DOM_DELTA_LINE) {
var modifier = parseInt(getComputedStyle(this).lineHeight);
} else if (event.deltaMode == event.DOM_DELTA_PAGE) {
var modifier = this.clientHeight;
}
if (event.deltaY != 0) {
// change vertical scrolling to gorizontal
this.scrollLeft += modifier * event.deltaY;
event.preventDefault();
}
});
</script>
style.css
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
display: flex;
overflow-x: auto;
}
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
.card::-webkit-scrollbar {
display: none;
}
---------------------------------------------------Thanks in advance-------------------------------------------------------------------------------------------------------------------
答案1
得分: 0
这个调用 getComputedStyle(this).lineHeight
返回 normal
作为返回值。这就是为什么调用 modifier = parseInt(getComputedStyle(this).lineHeight);
会将 NaN
设置为修改器属性的值。我已经添加了一些检查:
document.getElementById("horizontal-scroller").addEventListener('wheel', function(event) {
var modifier = 1;
if (event.deltaMode == event.DOM_DELTA_PIXEL) {
modifier = 1;
}
else if (event.deltaMode == event.DOM_DELTA_LINE) {
modifier = parseInt(getComputedStyle(this).lineHeight);
}
else if (event.deltaMode == event.DOM_DELTA_PAGE) {
modifier = this.clientHeight;
}
if(isNaN(modifier)) {
modifier = 1;
}
if (event.deltaY != 0) {
this.scrollLeft += modifier * event.deltaY;
event.preventDefault();
}
});
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
display: flex;
overflow-x: auto;
}
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
.card::-webkit-scrollbar {
display: none;
}
<section class="card" id="horizontal-scroller">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</section>
英文:
This call getComputedStyle(this).lineHeight
gaves you normal
as the return value. That is why calling this modifier = parseInt(getComputedStyle(this).lineHeight);
sets NaN
as the value of the modifier attribute. I've added some check for that:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("horizontal-scroller").addEventListener('wheel', function(event) {
var modifier = 1;
if (event.deltaMode == event.DOM_DELTA_PIXEL) {
modifier = 1;
}
else if (event.deltaMode == event.DOM_DELTA_LINE) {
modifier = parseInt(getComputedStyle(this).lineHeight);
}
else if (event.deltaMode == event.DOM_DELTA_PAGE) {
modifier = this.clientHeight;
}
if(isNaN(modifier)) {
modifier = 1;
}
if (event.deltaY != 0) {
this.scrollLeft += modifier * event.deltaY;
event.preventDefault();
}
});
<!-- language: lang-css -->
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
display: flex;
overflow-x: auto;
}
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
.card::-webkit-scrollbar {
display: none;
}
<!-- language: lang-html -->
<section class="card" id="horizontal-scroller">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论