方向 = rtl 时滚动 WKWebView 的问题

Question

我有一本带有 dir=rtl 的电子书，我使用以下 css 将 html 的内容分成几列：

#book {
    width:350px;
    height:750px;

    margin-left:25px;
    margin-right:25px;

    -webkit-column-count:auto;
    -webkit-column-width:350px;

    -webkit-column-gap:50px;
  
    text-align:justify;
    word-wrap: break-word;
}

我使用以下行获取 Webview 的内容宽度来计算生成的列数：

[myWKWebView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('html')[0].scrollWidth;"]

我使用以下方法水平滚动 WebView：

[myWKWebView evaluateJavaScript:[NSString stringWithFormat:@"window.scrollTo(%d,0);",xPosition]];

以上所有代码都运行得很好，直到我介绍了 css 的方向：

direction:rtl;

将方向添加到 css 后，scrollWidth 停止提供正确的测量值，scrollTo 函数停止工作。

我使用CSS中的方向，从右到左对列进行排序。 有没有不影响滚动功能和滚动宽度的替代方案？

请注意，这是用于初始化 WebView 的代码：

WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
theConfiguration.selectionGranularity = WKSelectionGranularityCharacter;
[theConfiguration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"];
theConfiguration.preferences.javaScriptEnabled = true;
myWKWebView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];
myWKWebView.UIDelegate = self;
myWKWebView.userInteractionEnabled = true;
myWKWebView.contentMode = UIViewContentModeScaleAspectFit;
myWKWebView.autoresizesSubviews = true;
myWKWebView.scrollView.scrollEnabled = true;
myWKWebView.multipleTouchEnabled = true;

[self.view addSubview: myWKWebView];

Answer 1

当您将

direction: rtl

应用于电子书内容的 CSS 时，它会更改 WebView 计算滚动宽度的方式并影响水平滚动行为。

scrollWidth

值和

scrollTo

函数现在受到从右到左方向的影响，因此它们在从左到右的布局中不会按预期运行。

解决此问题的方法如下：

问题：

1. scrollWidth

   问题： 应用

   direction: rtl

   时，由于从右到左的布局，

   scrollWidth

   可能会给出不正确或翻转的值。

2. scrollTo

   问题：

   window.scrollTo(x, 0)

   功能可能无法按预期工作，因为滚动现已反转。

解决方案：

1. 调整 RTL 的滚动宽度计算： 不要直接依赖

   scrollWidth

   ，而是根据

   body

   或容器的

   scrollLeft

   属性计算正确的宽度。在 RTL 模式下，

   scrollLeft

   的行为有所不同（它可能变为负数或翻转）。

   您可以像这样使用 JavaScript 来获取实际宽度：

   var totalWidth = document.body.scrollWidth; 
   var viewportWidth = window.innerWidth;
   var rtlOffset = totalWidth - viewportWidth;
   

2. 修改 RTL 的滚动逻辑： 在 RTL 模式下滚动时，需要调整滚动位置。滚动方向是相反的，因此不是直接通过

   xPosition

   滚动，而是从内容的总宽度中减去它：

   var xPositionRTL = totalWidth - viewportWidth - xPosition;
   window.scrollTo(xPositionRTL, 0);
   

3. 替代 CSS 方法： 如果

   direction: rtl

   的目的是从右向左对齐列而不影响滚动，您可以尝试使用

   writing-mode: vertical-rl;

   来实现类似的布局。但是，这可能需要对您的布局进行额外调整。

4. 额外调试： 在 RTL 模式下测试

   scrollLeft

   值以更好地了解行为。您可以记录

   document.body.scrollLeft

   以查看滚动时它的行为方式，这可以让您更清楚地了解如何调整滚动功能。

总结：

• 要修复 RTL 模式下的

  scrollWidth

  和

  scrollTo

  问题，请根据内容宽度和视口宽度计算正确的滚动偏移。
• 通过从总宽度中减去滚动位置来调整

  scrollTo

  逻辑以考虑 RTL 模式下的反向方向。