Question

我正在创建一个嵌套在网页div中的three.js应用程序。我正在使用OrbitControls.js来允许通过鼠标滚轮进行缩放。但是，使用鼠标滚轮会导致整个页面滚动。当鼠标悬停在画布上时，我需要禁用滚动。

我找到了this question的解决方案，即向OrbitControls.js添加一些代码。此解决方案适用于Chrome和Internet Explorer，但不适用于Firefox（这是我尝试过的唯一浏览器）

对于适用于Firefox的解决方案的任何建议？

通过查看上面引用的问题中提供的this link可以看到我正在寻找的功能示例（除非您使用的是Firefox）

JavaScript的：

var container = document.getElementById("container");
container.appendChild(renderer.domElement);

controls = new THREE.OrbitControls(camera, renderer.domElement);

HTML：

<div id="container"></div>

Answer 1

Can you not just listen for a scroll event on the specific div and just func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { //Uses prototype cell from Interface Builder called "CommentTableCell" let tableCell = tableView.dequeueReusableCellWithIdentifier("CommentTableCell", forIndexPath: indexPath) as! CommentTableCell tableCell.userInteractionEnabled = true tableCell.selectionStyle = .None //Sets the text for the cells in the comment table tableCell.commentText.text = comments[indexPath.row] tableCell.timeLabel.text = commentTimes[indexPath.row] return tableCell } //As many rows in the table as there are comments func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return comments.count } //Allows the user to delete comments func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) { if (editingStyle == UITableViewCellEditingStyle.Delete) { comments.removeAtIndex(indexPath.row) commentsTable.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Automatic) } override func viewDidLoad() { super.viewDidLoad() self.view.layer.borderWidth = 0.75 self.view.layer.borderColor = borderColor.CGColor self.view.layer.cornerRadius = 5.0 //Gets rid of the line between comment cells commentsTable.separatorStyle = UITableViewCellSeparatorStyle.None commentsTable.backgroundView = nil //Sets the height of the row to fit text boxes self.commentsTable.estimatedRowHeight = self.commentsTable.rowHeight self.commentsTable.rowHeight = UITableViewAutomaticDimension } }?

Here is a jsFiddle version

jsFiddle : https://jsfiddle.net/qLh22das/

HTML

scrollTop 0; scrollLeft 0;

CSS

<div id="scroller">
    <p>TEXT 1</p>
    <p>TEXT 2</p>
    <p>TEXT 3</p>
    <p>TEXT 4</p>
</div>
<br />
<br />
<br />
<div id="scroller2">
    <p>TEXT 1</p>
    <p>TEXT 2</p>
    <p>TEXT 3</p>
    <p>TEXT 4</p>
</div>

Javascript

#scroller {
    height:100px;
    overflow-y: auto;
}

#scroller2 {
    height:100px;
    overflow-y: auto;
}

Answer 2

在从Canvas的解决方案中获得一些灵感之后找到了解决方案。我确信这是three.js / OrbitControls.js的一个问题，我没想到只是尝试正常的Javascript事件。

var container = document.getElementById('container');
var active = false; //is the mouse over the div
var scrollPosition = 0;
container.onmouseenter = function(e) {
    active = true;
    scrollPosition = document.documentElement.scrollTop;
};

container.onmouseleave = function(e) {
    active = false;
};

window.onscroll = function(e)
{
    if (active) {
        window.scrollTo(0,scrollPosition);
    }
};

Answer 3

我在当前项目中遇到了同样的问题，并通过更改OrbitControls.js中的以下行来修复它：

# Line 781
this.domElement.removeEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox

# Line 798
this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox

到

# Line 781
this.domElement.removeEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox

# Line 798
this.domElement.addEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox

我已经在github上创建了一个拉取请求：https://github.com/mrdoob/three.js/pull/7310

在Firefox

3 个答案: