Question

我有超过6篇文章，首先我要显示3篇文章，当用户滚动鼠标滚轮时，它会从右侧向左侧线性滚动。即使我也想隐藏滚动条。

你能帮助我吗？

我尝试了代码，但同样的问题。请检查一下。

＆＃13;

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

$(document).ready(function() {
    $('.full_screen_100').hScroll(60); // You can pass (optionally) scrolling amount
});

＆＃13;

.horizontal_scroll .full_screen_100
{
	width: 100%;
	background-color: #fff;
   overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: text-top;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px;
}
.horizontal_scroll .full_screen_100 article{
	width: 33%;
	height: 100%;
  display: inline-block;
  border-left: solid 1px #E2E2E2;
   display: table-cell;

}
#left_scroll{
	overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: text-top;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px
}

＆＃13;

<div class="horizontal_scroll">
		<div class="full_screen_100" id="left_scroll">
			<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
				<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
				<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
				<article><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
				<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
		</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><

＆＃13;

Answer 1

Vanilla JS

＆＃13;

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

＆＃13;

#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}

#gentags > div{
    overflow: hidden;
    width:200%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 16.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}

＆＃13;

<div id="gentags">
<div class="horizontal_scroll">
		<div class="full_screen_100" id="left_scroll">
			<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
			<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
	</div>
</div>
</div>

＆＃13;

Answer 2

使用此代码，您可以水平滚动

  Workbook workbook = new XSSFWorkbook(excelFile);

  // defines the standard pointer in document in the first Sheet
  XSSFSheet data = this.workbook.getSheetAt(0);
  // you could iterate the document with an iterator
  Iterator<Cell> iterator = this.data.iterator();

  // x/y pointer at the document
  Row row = data.getRow(y);
  Cell pointingCell = row.getCell(x);

  String pointingString = pointingCell.getStringCellValue();

如何在鼠标滚轮上从右向左线性滚动？

2 个答案: